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Hj A 
PREFACE 


美国 学 者 Goodchild 于 1992 年 提出 的 地 理 信息 系统 (Geographic Information System. 
GIS) 是 对 地 理 信 息 空间 进行 描述 采集、 处 理 、 存 储 、 管 理 . 分 析 和 应 用 的 一 门 综合 性 学 科 。 
随 着 计算 机 技术 、 信 息 技术 .空间 技术 以 及 网 络 的 发 展 , 利 用 Web 发 布 信息 越 来 越 普及 ,而 
地 理 信息 系统 (GIS) 与 网 络 的 结合 产生 了 万 维 网 地 理 信息 系 统 (WebGIS), 它 引起 了 地 理 信 
息 发 布 的 全 新 变革 ,为 实现 GIS 信息 的 共享 提供 了 技术 保障 。 

21 世纪 是 一 个 数字 化 信息 爆炸 的 时 代 , 随 着 分 布 式 网 络 技术 .嵌入 式 移动 网 络 技术 等 
网 络 技 术 的 快速 发 展 ,以 及 “数字 地 球 “ 智 慧 地 球 ”“ 物 联网 * 云 计算 “大 数据 ”等 概念 的 提 
出 ,网 络 GIS 共享 与 应 用 全 面 铺 开 , 包 括 桌 面 端 \Web 端 , 移 动 端 以 及 云端 GIS 应 用 ,呈现 百 
花 齐 放 之 态 。 当 今 GIS 正 朝 着 一 个 可 运行 的 分 布 式 的 .开放 的 、 网 络 化 的 全 球 GIS 发 展 ， 
基于 因特网 的 WebGIS 将 成 为 下 一 阶段 GIS 发 展 的 一 个 主流 趋势 。 

本 书 编写 过 程 中 参考 了 大 量 的 地 理 信息 系统 专业 著作 ,以 及 ArcGIS 和 OpenGIS 相关 
的 技术 文档 。 书 中 介绍 软件 操作 方法 的 内 容 参 考 了 Esri 公司 资源 中 心 的 部 分 公开 资料 及 
软件 帮助 文档 ,以 保证 软件 操作 的 准确 性 ,在 这 里 对 行业 前 辈 及 Esri 公司 一 并 表示 感谢 。 

本 书 由 张 贵 军 主持 编著 ,负责 全 书 章 节 内 容 的 安排 和 统筹 。 陈 铭 参与 编写 本 书 第 4 章 
和 第 5 章 , 李 栋 炜 参与 编写 本 书 第 1 一 3 章 , 夏 华 栋 参 与 编写 第 6 一 8 章 , 周 晓 根 参与 全 书 内 
容 的 检查 , 郝 小 虎 参 与 书 中 插图 的 绘制 ,这 些 人 员 长 期 从 事 GIS 方面 的 理论 研究 与 应 用 开 
发 ,具有 丰富 的 理论 知识 和 实践 经 验 。 最 后 ,感谢 俞 立 教 授 在 本 书 编写 过 程 中 给 予 的 指导 和 
提出 的 宝贵 意见 。 

由 于 时 间 仓 促 以 及 笔者 能 力 所 限 , 书 中 难免 有 错误 和 不 足 之 处 ,欢迎 广大 读者 及 同行 批评 
指正 ,以 促 改进 。 阅 读本 书 的 过 程 中 ,如 果 读 者 有 任何 疑问 ,可 以 发 邮件 到 webgisdevelop@ 
163. com, 我 们 会 及 时 回答 您 的 问题 。 


编 者 
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Web 基础 知识 篇 


本 篇 主要 介绍 Web 开发 的 基础 知识 。 第 1 章 介绍 Web 应 用 的 发 展 
历程 及 组 成 部 分 。 第 2 3E dr £8 Web 前 端 开 发 的 相关 技术 ,包括 布局 技术 
和 脚本 技术 ,通过 一 个 用 户 和 登录 界面 的 简单 案例 演示 了 如 何 使 用 前 端 技 术 
构建 基本 界面 ; 第 3 Xk jp i8 Web 后 端 开 发 的 相关 技术 ,包括 基本 开发 环 
境 的 搭建 ,并 通过 完善 用 户 管 理 系统 介绍 了 当前 流行 的 SSH 框架 的 基本 
使 用 。 


Web 应 用 开发 简介 


1.1 Web 应 用 
1.1.1 Web 应 用 发 展 历史 


Web 技术 的 发 展 经 历 了 三 个 阶段 : 静态 文档 动态 网 页 、Web2.0 时代。 

1. Web 技术 发 展 的 第 一 阶段 一 一 静态 文档 

通过 客户 机 端的 Web 浏览 器 ,用 户 可 以 访问 网 络 上 各 个 Web 站 点 ,通过 Web 站 点 上 
的 主页 访问 整个 网 站 。 每 一 个 网 页 中 都 有 很 多 信息 及 相关 的 链接 ,用 户 可 以 通过 这 些 超 文 
本 链接 进入 另 一 个 站 点 或 其 他 网 页 中 。 每 个 Web 站 点 都 是 以 首页 作为 站 点 的 入 口 ,由 一 台 
主机 、Web 服务 器 及 许多 Web 页 组 成 ,其 他 的 Web 页 为 支点 ,形成 一 个 树 状 的 结构 。 

超 文本 标注 语言 (HTML) 提 供 了 控制 超 文本 格式 的 信息 ,利用 这 些 信息 可 以 在 用 户 的 
屏幕 上 显示 出 特定 设计 风格 的 Web 页 。Web 服务 器 使 用 HTTP 超 文本 传输 协议 , 将 
HTML 文档 从 Web 服务 器 传输 到 用 户 的 Web 浏览 器 上 。 这 一 阶段 , Web 服务 器 基本 上 只 
是 一 个 HTTP 的 服务 器 , 它 负 责 客 户 端 浏览 器 的 访问 请 求 ,建立 连接 ,响应 用 户 的 请 求 , 查 
找 所 需 的 静态 Web 页 面 , 再 返回 到 客户 端 。 

随 着 互联 网 技术 的 不 断 发 展 以 及 网 上 信息 呈 几 何 级 数 的 增加 ,人 们 逐渐 发 现 手 工 编写 
包含 所 有 信息 和 内 容 的 页 面 对 人 力 和 物力 都 是 一 种 极 大 的 浪费 ,而 且 几 乎 变 得 难以 实现 。 
此 外 ,采用 静态 页 面 方式 建立 起 来 的 站 点 只 能 够 简单 地 根据 用 户 的 请 求 传送 现 有 页 面 ,而 无 
法 实现 各 种 动态 的 交互 功能 。 具体 来 说 ,静态 页 面 在 以 下 儿 个 方面 都 存在 明显 的 不 足 : 无 
法 支持 后 台数 据 库 、 无 法 有 效 地 对 站 点 信息 进行 及 时 更 新 、 无 法 实现 动态 显示 效果 。 而 这 些 
不 足 之 处 ,促使 Web 技术 进入 了 发 展 的 第 二 阶段 。 

2. Web 技术 发 展 的 第 二 阶段 一 一 动态 网 页 

为 了 克服 静态 页 面 的 不 足 , 人 们 将 传统 单机 环境 下 的 编程 技术 引入 互联 网 络 与 Web 技 
术 相 结合 ,从 而 形成 新 的 网 络 编程 技术 。 网 络 编程 技术 通过 在 传统 的 静态 页 面 中 加 入 各 种 
程序 和 人 逻辑 控制 ,在 网 络 的 客户 端 和 服务 端 实现 了 动态 和 个 性 化 的 交流 与 互动 。 人 们 将 这 
种 使 用 网 络 编程 技术 创建 的 页 面 称 为 动态 页 面 。 

从 网 站 浏览 者 的 角度 来 看 ,无 论 是 动态 网 页 还 是 静态 网 页 ,都 可 以 展示 基本 的 文字 和 图 
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片 信 息 , 但 从 网 站 开发 ,管理 .维护 的 角度 来 看 就 有 很 大 的 差别 。 动 态 网 页 以 数据 库 技术 为 
基础 ,可 以 大 大 降低 网 站 维护 的 工作 量 ; 采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ,如 
用 户 注 册 、 用 户 登 录 在 线 调 查 、 用 户 管理 ,订单 管理 等 ; 动态 网 页 实际 上 并 不 是 独立 存在 于 
服务 器 上 的 网 页 文件 ,只 有 当 用 户 请 求 时 服务 器 才 返 回 一 个 完整 的 网 页 。 

3. Web 技术 发 展 的 第 三 阶段 一 一 Web2.0 时 代 

Web2.0 不 是 一 个 具体 的 事物 ,而 是 一 个 阶段 ,是 促成 这 个 阶段 的 各 种 技术 和 相关 的 产 
品 服务 的 一 个 称呼 。 这 个 阶段 与 前 两 个 阶段 相 比 ,有 了 很 大 的 跨越 。 

Web2. 0 是 以 Flickr、43Th ings. com 等 网 站 为 代表 ,以 Blog .TAG、SNS、RSS wiki 等 
社会 软件 的 应 用 为 核心 ,依据 相关 的 理论 和 技术 实现 的 新 一 代 互联 网 模式 。 

Webl.0 到 Web2. 0 就 是 由 网 站 编辑 到 全 民 参 与 编辑 的 过 程 。 每 个 用 户 都 可 以 在 开放 
的 网 站 上 通过 简单 的 浏览 器 操作 而 拥有 他 们 自己 的 数据 ,人 们 可 以 更 加 方便 地 进行 信息 获 
取 , 发 布 .共享 以 及 沟通 交流 和 群 组 讨论 等 。 每 个 人 都 成 为 新 闻 或 者 观点 的 发 布 人 ,通过 各 
种 手段 ,如 Tag、 关 联 、 链 接 等 ,网 站 能 够 最 大 程度 地 展示 个 人 的 作用 ,进而 激发 个 人 的 积极 
性 ,人 们 成 为 Web 上 社会 的 人 ,Web 也 有 了 社会 性 ,成 为 社会 化 网 络 。 


1.1.2 Web 应 用 的 基本 构成 


上 面 已 经 了 解 到 Web 发 展 的 基本 历史 。 我 们 从 其 发 展 的 第 一 阶段 来 了 解 Web 应 用 的 
构成 ,一 个 基本 的 Web 应 用 首先 需要 有 浏览 器 和 服务 器 ,它们 的 结构 关系 如 图 1. 1-1 所 示 。 


发 送 一 个 请 求 


浏览 器 


返回 一 


> 
E] 


ifi 服务 器 


图 1.1-1 Web1. 0 时 代 网 络 应 用 基本 结构 关系 
当 浏览 者 点 击 某 个 链接 或 者 输入 网 址 的 时 候 浏 览 器 向 服务 器 发 送 一 个 请 求 ,服务 器 直 


接 返 回 一 个 文档 给 浏览 器 显示 ,你 就 可 以 看 到 一 个 网 页 了 ,所 以 首先 应 该 知道 ,任何 一 个 
Web 应 用 都 是 分 为 前 端 和 后 台 的 ,单独 的 一 部 分 不 能 构成 一 个 完整 的 Web 应 用 。 


1.2 Web 前 端 开发 简介 


1.2.1 网 页 布局 和 样式 


网 页 内 容 五 花 八 门 ,但 总 地 来 说 无 非 就 是 三 种 元 素 : 文本 、 图 片 和 视频 。 网 页 设计 师 是 
如 何 制作 出 各 种 排版 不 一 样 的 网 页 的 呢 ? 其 实 网 页 本 质 上 只 是 一 个 文本 文件 ,我 们 称 之 为 
HTML, 通 过 CSS(Cascading Style Sheet) 层 和 样式 表 ( 其 实 也 是 一 个 文本 文件 ) 来 控制 网 页 
元 素 的 样式 。 浏 览 器 的 作用 就 是 解析 这 些 文本 数据 以 图 形 化 的 形式 展示 出 来 。 
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1.2.2 JavaScript 脚本 语言 


从 Web 的 发 展 历史 中 我 们 已 经 知道 了 一 个 HTML 网 页 是 静态 的 , 随 着 时 代 的 发 展 ,我 
们 已 经 不 能 满足 于 单纯 的 信息 展示 和 阅读 了 ,于 是 诞生 了 网 页 脚本 语言 , 它 是 一 种 由 浏览 器 
执行 的 语言 ,最 后 流行 开 来 并 得 到 广泛 应 用 的 便 是 JavaScript 语言 了 。 这 里 要 注意 的 是 ， 
JavaScript 和 Java 是 完全 不 同 的 语言 ,不 能 混淆 。 

有 了 网 页 脚本 语言 支持 ,我 们 可 以 做 出 复杂 的 交互 效果 ,比如 下 拉 菜 单 ,表单 验证 ,甚至 
是 动画 效果 。 加 上 现在 发 展 起 来 的 HTML5 和 CSS3 技术 ,我们 甚至 可 以 做 出 媲美 桌面 软 
件 的 效果 ,这 也 是 发 展 的 大 趋势 。 


1.2.3 Flash 技术 


大 名 鼎鼎 的 Adobe 公司 的 Flash 技术 可 谓 家 喻 户 晓 ,通过 Flash 技术 可 以 实现 各 种 复 
杂 的 交互 效果 ,20 世纪 初期 各 种 漂亮 的 网 站 很 多 都 是 基于 Flash 开发 的 ,包括 现在 我 们 经 
常 访问 的 视频 类 网 站 的 在 线 播放 也 是 使 用 到 了 Flash 技术 ,但 随 着 时 代 的 发 展 ,HTML5 的 
兴起 ,Flash 技术 的 应 用 范围 也 越 来 越 小 。 


1.3 Web 后 台 开 发 简介 


1.3.1 服务 器 软件 


Web 后 台 可 以 简单 地 理解 为 服务 器 和 服务 器 软件 ,服务 器 就 是 硬件 主机 ,服务 器 软件 
就 是 用 来 接收 客户 端 请 求 并 做 处 理 返 回 数据 的 软件 。 但 随 着 时 代 的 发 展 ,这 么 理解 已 经 不 
完全 正确 了 , 随 着 数据 量 和 访问 量 的 爆发 性 增长 ,传统 的 服务 技术 已 经 不 能 满足 需求 ,而 诞 
生 了 分 布 式 技 术 , 这 是 一 种 将 很 多 服务 器 联系 起 来 形成 一 个 巨大 的 服务 器 集群 的 技术 ,可 以 
胜任 更 加 繁重 的 工作 。 

这 里 我 们 只 需要 将 Web 后 台 理 解 为 一 台 主 机 即 可 ,服务 器 端 软 件 种 类 繁多 ,并 且 取 决 
于 开发 的 语言 ,比如 Java 多 使 用 Tomcat, 而 PHP 则 较 多 使 用 Apache 或 者 Nginx, Asp. Net 
则 可 能 使 用 IIS 了 。 当 我 们 开发 好 了 某 个 应 用 ,部 署 到 这 些 软件 下 面 去 运行 时 , 便 可 以 监听 
客户 端 发 送 来 的 请 求 并 作出 相应 的 逻辑 处 理 。 


1.3.2 数据 库 


前 面 已 经 介绍 了 ,服务 器 软件 可 以 对 客户 端的 请 求 进行 处 理 , 但 网 页 中 包含 的 信息 存放 
在 哪里 呢 ? 在 计算 机 刚 发 展 起 来 时 ,唯一 的 办 法 当然 是 保存 为 文本 了 ,但 存 为 文本 有 一 个 很 
大 的 蜂 端 ,因为 文本 数据 很 难 进行 复杂 的 分 析 和 处 理 , 于 是 诞生 了 关系 型 数据 库 ,什么 是 关 
系 型 数据 库 呢 ?顾名思义 就 是 用 于 表示 数据 间 人 逻辑 关系 。 例 如 ,一 个 学 生 的 信息 可 能 包含 
姓名 、 年 龄 等 诸多 属性 ,通过 关系 数据 库存 放 这 些 数据 的 同时 ,还 可 以 方便 地 将 它们 读 取 出 
来 ,如 图 1. 3-1 所 示 。 
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发 送 一 个 请 求 


浏览 器 ` ca 业务 处 理 
返回 页 面 HTTP 服 务 程序 


1.3-1 Web2.0 时 代 网 络 应 用 基本 结构 


当 服务 器 执行 程序 时 ,可 以 根据 需要 去 读 取 数 据 库 的 数据 加 以 处 理 。 数 据 的 种 类 也 自 
然 十 分 多 , 流行 的 有 MySQL, Oracle 等 ,它们 的 特点 也 不 尽 相 同 , 本 书 中 我 们 选用 
PostgreSQL 作为 开发 使 用 的 数据 库 , 因 为 它 对 空间 数据 的 支持 更 加 友好 和 完善 。 


1.3.3 Web 后台 开 发 语言 


后 台 的 开发 语言 十 分 繁多 ,在 网 络 发 展 的 初级 阶段 使 用 CGI 技术 来 实现 动态 效果 时 可 
能 使 用 的 是 C 语言 ,发展 到 现在 有 PHP. Java. Asp. Net, Ruby, Go 等 ,甚至 连 原来 工作 在 浏 
览 器 端的 JavaScript 都 被 搬 到 了 服务 器 端 ,并 命名 为 Node. js. 

需要 提醒 的 是 ,语言 的 种 类 太 多 ,这 个 数量 在 未 来 仍然 可 能 变化 ,如 果 要 成 为 一 个 优秀 
的 开发 者 ,不 应 该 被 语言 所 局 限 , 而 更 加 应 该 关注 实现 问题 的 思路 和 本 质 。 


Web 前 端 开 发 基础 


2.1 前 


ill 


一 个 完整 的 Web 系统 主要 包括 前 端 和 后 台 两 部 分 ,前 端 负 责 处 理 视图 页 面 ,后 台 负 责 
处 理 逻辑 业务 。 在 Web 技术 发 展 初期 很 长 的 一 段 时 间 内 ,技术 的 重点 都 在 后 台 , 但 随 着 
Web 应 用 复杂 度 的 提高 ,前端 技 术 也 得 到 了 空前 的 发 展 。 

WebGIS 应 用 在 Web 开发 中 属于 对 前 台 技 术 要 求 较 高 的 一 类 ,通常 一 个 体验 良好 的 
WebGIS 系统 都 是 一 个 SPA(Single Page Application, 单 页 ) 应 用 ,同时 还 涉及 图 形 泻 染 和 
数据 异步 传输 技术 。 本 章 主要 介绍 Web 前 端 开 发 的 基础 知识 ,包括 页 面 布局 以 及 使 用 脚本 
语言 实现 简单 的 交互 ,适合 希望 从 事 WebGIS 系统 开发 但 对 前 端 开 发 了 解 较 少 的 人 士 阅 
读 , 如 果 想 深入 了 解 相关 知识 请 参考 其 他 书籍 。 


2.1.1 超 文本 标记 语言 
2.1.2 认识 超 文 本 标记 语言 


超 文本 标记 语言 的 全 称 是 Hyper Text Markup Language, 即 HTML。 通 常 ,网 页 的 浏 
览 者 能 看 到 的 只 是 网 页 中 的 内 容 , 而 无 法 看 到 里 面 的 超 文本 标记 语言 ,但 在 超 文 本 标记 语言 
的 作用 下 ,网 页 才能 区 分 显示 出 网 页 的 标题 .正文 .链接 .甚至 多 媒体 等 内 容 。 要 明确 的 是 ， 
超 文本 标记 语言 并 不 是 编程 语言 。 

超 文 本 标记 语言 由 各 种 不 同 用 途 的 标签 组 成 ,例如 ,一 head 二 一 /head 二 就 组 成 了 一 个 
头 标签 ,而 且 大 多 数 标签 都 是 成 对 出 现 的 ,在 标签 头 和 标签 尾 之 间 可 以 加 入 相关 文本 内 容 ， 
也 可 以 嵌 套 另外 的 标签 。 现 在 我 们 使 用 文本 编辑 器 新 建 一 个 文件 ,并 修改 后 绥 名 为 . html. 
MAH index. html, 并 在 该 文件 中 写 入 以 下 内 容 。 


<! DOCTYPE html > 
<html> 
<head> 
</head> 
<body> 
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hello world! 

</body > 

</html> 

可 以 看 到 ,一 个 基本 的 网 页 文档 主要 包括 头 部 分 (header) 和 主体 部 分 (body) ,其 中 头 部 
分 用 于 设置 网 页 的 基本 属性 ,引入 必要 文件 等 功能 ,而 主体 部 分 则 用 于 显示 网 页 所 要 展示 的 
内 容 。 用 浏览 器 打开 创建 的 文件 ,可 以 看 到 图 2. 1-1 所 示 的 效果 。 

从 源码 中 可 以 看 到 ,该 文档 首先 通过 二 ! DOCTYPE html 二 声明 了 这 是 一 个 HTML 
文档 。 一 个 HTML 文档 首先 由 HTML 标签 包围 ,再 次 是 head 和 body 标签 ,在 head 标签 
PRET meta,title 和 Link 标签 , meta 用 于 设置 HTML 的 某 些 属性 ,例如 该 文档 中 便 申 
明了 文档 的 编码 ,title 定义 了 文档 的 标题 ,可 以 看 到 浏览 器 标签 卡 上 显示 了 title 中 的 内 
容 , 而 link 则 引入 了 一 个 外 部 文件 ,body 中 直接 加 入 了 网 页 要 显示 的 文字 。 实 际 应 用 的 
可 能 用 到 的 标签 还 有 很 多 ,会 在 之 后 展开 介绍 。 一 个 基本 的 HTML 文档 结构 的 包围 关 
系 如 图 2. 1-2 所 示 。 


r 


己 | 回 | x 


= 
B inpifoc~ 8 P - 86 X] giocare d 


hello world! 


HTML 
head 
body 
图 2.1-1 用 网 页 显示 helloworld 2.1-2 一 个 静态 网 页 的 基本 结构 


2.1.3 文档 语言 编码 


在 中 文 网 页 中 ,如 果 没 有 设置 正确 的 编码 会 导致 中 文 无 法 正常 显示 , 想 要 正确 地 显示 中 
文 则 需要 为 网 页 设置 正确 的 编码 ,具体 的 做 法 是 在 head 标签 中 添加 编码 声明 ,如 下 所 示 。 


<! DOCTYPE html > 
<html> 
< head» 
< meta charset = "utf - 8"> 
</head> 
< body> 
你 好 世界 ! 
</body> 
</html > 
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文档 的 编码 决定 了 文档 数据 文件 在 硬盘 中 存储 的 编码 方式 ,对 于 一 个 全 英文 的 网 页 , 文 
档 的 编码 可 能 显得 不 是 那么 重要 ,但 对 于 包含 中 文 的 网 站 ,编码 便 是 一 个 不 得 不 关注 的 问 
题 ,因为 错误 的 解码 会 导致 中 文 无 法 正常 显示 ,所 以 在 初学 网 页 开发 的 时 候 就 该 注重 编码 这 
个 问题 , 养 成 良好 的 习惯 能 避免 很 多 不 必要 的 麻烦 。 常 用 的 编码 格式 有 utf-8、GBK、 
GB2312、ASIC 等 。 通 常 我 们 选用 utf-8 编码 ,因为 它 对 各 种 语言 的 兼容 性 更 好 ,而 且 使 用 范 
围 更 广 ,需要 注意 的 是 ,网 页 编码 的 选择 不 是 独立 的 ,而 需要 配合 数据 库 的 编码 ,否则 会 造成 
乱码 。 关 于 数据 库 的 具体 配置 会 在 后 文 介绍 。 打 开 新 建 的 网 页 可 以 发 现 中 文 可 以 正常 显示 
了 ,如 图 2.1-3 所 示 。 
A 
E htpyhoc- $- Box [E tocathost gm 
你 好 世界 ! 


图 2.1-3 正确 的 编码 设置 


2.2 网 页 布局 基础 


2.2.1 认识 HTML 十 CSS 布局 技术 


前 面 介绍 了 HTML 是 由 各 种 标签 组 成 的 ,但 各 种 网 页 的 样式 形形色色 ,各 有 风格 ,如 
何 才能 合理 使 用 各 种 标签 将 网 页 按照 自己 的 意愿 展示 出 来 呢 ? 这 里 就 要 用 到 CSS 级 联 样 
式 表 了 ,CSS 实际 上 是 一 种 后 缀 名 为 .CSS 的 文本 文件 ,下 面 是 一 个 简单 的 CSS 文件 的 
例子 。 


.container( 
border:lpx & ccc solid; 
width :500px; 
height:400px; 

) 

可 以 看 到 ,这 段 代 码 中 定义 了 . container 的 边线 以 及 宽度 和 高 度 的 属性 值 , 当 其 作用 于 
HTML 文档 的 时 候 ,页 面 元 素 便 会 发 生 相 应 的 变化 ,这 就 是 CSS 的 基本 工作 原理 ,单独 的 
CSS 是 没有 意义 的 ,可 以 这 么 理解 : HTML 标签 对 网 页 不 同 内 容 区 块 进行 了 划分 ,而 CSS 
则 定义 了 HTML 标签 的 基本 样式 属性 。 
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2.2.2 样式 文件 的 引用 方式 


1. ARERR 
CSS 文件 内 容 可 以 直接 通过 一 个 style 标签 嵌入 在 网 页 中 ,一 个 基本 的 例子 如 下 面 代码 
所 示 。 


<! DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
< style type="text/css"> 
body 
font - size: 28px; 
color:red; 
text align: center; 
} 
</style> 
</head> 
< body> 
你 好 世界 ! 
</body> 
</html > 


该 文件 在 head 标签 中 加 入 了 style 标签 ,并 正 对 body 标签 定义 了 样式 ,其 中 font-size 
设置 了 字体 的 大 小 ,color(font-color) 设 置 了 字体 的 颜色 ,text-align 设置 文本 为 居中 的 格 
式 。 可 以 看 到 网 页 变 成 了 如 图 2. 2-1 所 示 的 效果 。 


NC - 
cmm gm 
你 好 世界 ! 


图 2. 2-1 应 用 了 样式 后 的 网 页 


这 就 是 将 style 文件 内 嵌 在 文档 中 的 做 法 ,通常 会 将 CSS 样式 表 放 在 head 标签 中 ,也 
可 以 将 它 放 到 body 中 实现 同样 的 功能 ,但 并 不 推荐 这 样 做 ,因为 在 HTML 中 增加 样式 会 
降低 代码 的 可 读 性 。 
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2. 外 部 文件 引入 
对 于 规模 比较 大 的 项 目 ,样式 表 的 代码 容量 可 能 比较 大 ,如 果 直 接 将 它 内 肉 在 网 页 中 会 
对 代码 的 可 读 性 和 可 维护 性 造成 一 定 影响 ,这 时 应 该 采用 外 部 引用 的 方式 把 单独 保存 的 后 
BHA. css 的 样式 文件 引用 进来 。 在 index. html 的 同 级 目录 下 新 建 一 个 文件 夹 为 style 用 
来 专门 存放 样式 文件 。 进 入 style 文件 夹 ,新建 一 个 文件 style. css, 先 将 原本 添加 在 html 中 
的 body 样式 移动 到 style. css 中 ,并 编辑 添加 一 个 名 为 container 的 样式 ,该 文件 的 内 容 如 
下 所 示 。 
body{ 
font - size: 14px; 
text - align: center; 
background: # f9f9f9; 
) 
.container( 
width : 400px; 
margin:0 auto; 
margin- top: 100px; 
border:lpx & eee solid; 
background: # fff; 
padding: 20px; 
} 
可 以 看 到 ,样式 表 中 定义 了 一 个 名 字 为 container 的 选择 器 ,里 面 分 别 定义 了 四 个 边框 
ZR S BE .宽度 .内 边 距 和 外 边 距 。 这 里 要 注意 的 是 ,margin:0 auto 的 作用 使 其 居中 ,前 提 是 
该 容器 的 父 容 器 必须 设置 了 textalign:center, 接 下 来 在 原先 编辑 好 的 index. html 文件 中 
引入 这 个 文件 。 


«! DOCTYPE html > 

< html > 

<head> 
<meta charset = "utf - 8"> 
< link href = "style/style.css" type = "text/css" rel = "stylesheet"> 

</head> 

< body> 
< div class = "container"> 
</div> 

</body> 

</html> 


在 该 文件 中 ,通过 link 标签 引用 了 同 级 目录 下 的 style. css 文件 。 需 要 注意 的 是 ,单独 
的 样式 文件 中 不 需要 用 style 标签 包围 ,但 这 在 HTML 中 是 必需 的 。 最 终 显示 的 效果 如 
图 2. 2-2 所 示 。 
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eS oe 
[|S npynoc- 8 P ~ BS X || B localhost x | es 


SSS 


图 2.2-2 ”使 用 DIV 十 CSS 绘制 一 个 基本 的 容器 


2.2.3 CSS fx TB 


一 个 符合 W3C 标准 的 盒子 模型 如 图 2. 2-3 所 示 ,在 图 中 可 以 看 到 多 个 矩形 的 结构 ,所 
以 称 为 盒子 模型 。 


margin-top 


TuSu-urdaeur 


margin-bottom 


width 


1 1 
1 [ 
1 1 
T T 
1 1 
1 [ 


2.2-3 标准 的 盒子 模型 


现在 继续 修改 之 前 添加 的 文件 以 便 更 好 地 理解 它 是 怎么 工作 的 ,修改 该 文件 如 下 : 


<! DOCTYPE html > 
<html> 
< head> 
<meta charset = "utf - 8"> 
< link href = "style/style.css" type = "text/css" rel = "stylesheet"> 
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</head> 
<body> 
<div class = "container"> 
«form» 
< label > 邮箱 < lebel > 
< input type = "text" name = "email" value = ""> 
< label > 密码 < lebel > 
< input type = "password " name = "email" value = ""» 
< input type = "submit" value = "提交 "> 
</form> 
</div> 
</body> 
</html> 


在 该 文件 中 新 添加 了 label 和 input 标签 ,input 标签 在 网 页 中 用 于 用 户 的 输入 , 它 具 有 
表 2. 2-1 所 示 的 属性 。 


表 2.2-1 Input 的 基本 属性 


属 性 值 值 作 用 
Text 输入 文本 
Type Password 输入 密码 
Button 设置 input 为 按钮 
Submit 设置 为 form 的 提交 按钮 
Name 自 定义 向 后 台 提 交 时 的 参数 名 
Value 自 定义 设置 默认 的 值 


显示 效果 如 图 2. 2-4 所 示 。 可 以 看 到 ,因为 container 设置 了 margin-top:100px, 所 以 
白色 容器 到 上 方 的 距离 被 设置 成 了 100px, 而 里 面 的 内 容 又 因为 设置 了 padding:20px, 所 以 
内 边 距 显示 为 20px。 可 以 看 到 ,这 里 显示 出 了 一 个 基本 的 登录 界面 ,但 界面 比较 简单 ,美观 
性 欠 佳 ,在 之 后 的 内 容 中 会 进一步 对 页 面 进行 完善 。 


2. 2-4 创建 一 个 表单 
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2.2.4 类 选择 器 


CSS 的 选择 器 主要 有 两 种 : 一 种 是 class, 另 一 种 是 id, 两 者 的 区 别 在 于 class 在 一 个 页 
面 中 可 以 出 现 多 次 ,而 id 则 是 唯一 的 ,只 能 使 用 一 次 。 选 择 器 的 作用 是 将 CSS 样式 应 用 到 
特定 的 HTML 标签 上 。 比 如 这 里 定义 好 了 一 段 CSS 样式 。 


.container( 
border - top:lpx #000 solid; 
border - left:5px #336699 solid; 
border - right: 10px #c0c0c0 solid; 
border - bottom: 4px +000 solid; 
width : 200px; 
height: 200px; 
margin:100px; 
padding: 40px; 

) 


如 果 要 将 它 适用 到 某 个 div 标签 ,只 需 通过 class 引用 即 可 。 
< div class = "container"></div > 
如 果 想 通过 id 的 形式 ,具体 方法 是 一 样 的 ,区 别 是 选择 器 的 命名 和 引用 标识 规则 略 有 不 同 。 


t container( 
border - top:lpx #000 solid; 
border - left:5px #336699 solid; 
border - right: 10px #c0c0c0 solid; 
border - bottom: 4px #000 solid; 
width : 200px; 
height: 200px; 
margin:100px; 
padding: 40px; 

) 


<div id= "container"></div> 


2.2.5 进一步 修饰 


现在 进一步 美化 登录 界面 ,这 里 不 再 对 CSS 的 具体 写法 展开 讨论 ,而 是 直接 引用 一 个 
自 编 的 CSS 框架 leeui 对 登录 界面 进行 改造 。 现 在 去 除 引 用 之 前 编写 的 简单 的 style. css 文 
件 , 引 入 leeui 样式 文件 ,并 修改 index. html 代码 如 下 。 


<! DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type= "text/css" rel = "stylesheet"> 
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< style type= "text/css"> 
body(text — align: center;] 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "login- box"> 
<hl > 一 个 登录 DEMO </hl > 
<form action = "" meth od = "post"> 
<ul class = "lee - form- normal"» 
<li> 
<div class = "lee- input" 
< label > 邮箱 </label > 
< input type = "text" nane = "email" value = ""> 
</div> 
</li> 
<li> 
<div class = "lee- input"> 
< label > 密码 </label > 
< input type = "password " name = "password "value = ""> 
</div> 
</li> 
<li> 
< input class = "lee- button" style = "width :80px" type = "submit" value = "提交 "> 
</li> 
</ul> 
</form> 
</div> 
</body> 
</html> 


从 最 终 效果 图 2. 2-5 中 可 以 看 到 ,该 文件 中 只 编写 了 很 少 的 CSS 代码 ,仅仅 对 HTML 
增加 了 少量 的 布局 标签 就 实现 了 更 加 美观 的 登录 界面 效果 。 如 果 你 想 进一步 了 解 , 可 以 阅 


2. 2-5 使 用 CSS 技术 编写 一 个 登录 界面 
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iX leeui 中 的 源码 ,leeui 是 一 个 轻 量 级 的 CSS 框架 ,阅读 起 来 也 不 会 非常 困难 。 目 前 为 止 ， 
笔者 只 是 对 基本 知识 做 了 讲解 ,如 果 要 熟悉 并 熟练 使 用 这 些 知 识 还 需要 阅读 更 多 的 资料 。 


2.3 JavaScript 语言 基础 


2.3.1 JavaScript 简介 


前 面 已 经 介绍 了 页 面 编写 的 基本 方法 ,虽然 HTML 通过 CSS JEA RRK I E JE WT A 
实现 各 种 排版 样式 ,但 仅仅 能 实现 静态 的 页 面 效果 ,如 果 要 实现 某 些 动态 的 交互 效果 ,比如 
下 拉 菜 单 ,甚至 Ajax 异步 交互 ,就 必须 用 到 JavaScript 脚本 语言 了 。JavaScript 是 一 种 可 以 
直接 在 浏览 器 端 运行 的 脚本 语言 ,几乎 所 有 的 浏览 器 都 内 置 了 JavaScript 解释 器 。 开 发 者 
可 以 通过 JavaScript 对 文档 的 元 素 进行 操作 ,并 进行 逻辑 运算 从 而 实现 复杂 的 交互 功能 。 


2.3.2 Web 文档 对 象 模型 DOM 


在 了 解 JavaSrcipt 之 前 ,首先 要 了 人 解 文件 对 象 模型 (DocumentObjectModel, DOM) , È 
是 W3C 组 织 推荐 的 处 理 可 扩展 标志 语言 的 标准 编程 接口 。 

如 图 2. 3-1 所 示 , 可 以 看 到 DOM 是 一 个 树 结构 的 模型 ,其 中 的 每 个 元 素 称 为 一 个 节 
点 ,而 在 文档 中 则 对 应 了 一 个 标签 ,也 就 是 说 DOM 相当 于 将 HTML 文本 标签 实现 了 对 象 
化 ,并 通过 树 结构 的 模型 表示 出 了 它们 之 间 的 从 属 关系 ,所 以 JavaScript 可 以 通过 DOM 接 
口 对 文档 中 的 节点 ,也 就 是 标签 进行 操作 。 下 面 看 一 段 基 本 的 JavaScript 代码 。 

<! DOCTYPE html > 

<html> 

< head> 


< meta charset = "utf - 8"> 
«title» js </title> 


< body> 
文档 
根 元 素 : 
<html> 
—— 
[ 1 
元 素 元 素 
<head> <body> 
| 
元 素 属性 : TR: TER : 
<title> href <a> <hl> 
XK: 文本 : 文本 : 
“文档 标题 “我 的 链接 ” “我 的 标题 


图 2. 3-1 DOM 基本 结构 
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< script type = "text/javascript"> 
function test(){ 
alert('hello world'); 

} 

</script> 

< button onclick = "test( )"> 弹 出 一 个 窗口 </button > 
</body> 
</html> 


它 的 执行 结果 如 图 2. 3-2 所 示 。 


Oole e exer ¢ qm 


图 2. 3-2 使 用 脚本 通过 单 击 事件 弹出 一 个 窗口 


该 文件 通过 一 个 script 标签 定义 了 一 个 JavaScript 函数 ,使 其 执行 一 个 弹出 框 的 功能 。 
在 body 中 还 添加 一 个 按钮 标签 ,而 这 个 标签 就 是 DOM 模型 中 的 一 个 节点 ,通过 这 个 节点 
的 单 击 事件 去 执行 预先 自 定义 的 函数 , 便 实现 了 这 个 简单 的 单 击 按钮 弹出 对 话 框 的 功能 。 
由 此 可 以 知道 ,JavaScript 是 通过 监听 DOM 预先 定义 好 的 事件 ,并 去 操作 节点 的 各 种 属性 
来 实现 网 页 的 各 种 动态 效果 的 。 


2.3.3 ”使 用 JavaScript 实现 数据 的 校 验 


以 之 前 编写 的 登录 界面 为 模板 ,在 此 基础 上 实现 登录 之 前 的 账号 密码 的 校 验 功能 。 进 
行 前 台数 据 校 验 的 好 处 在 于 : 如 果 用 户 输入 了 非法 的 数据 可 以 直接 禁止 请 求 的 发 出 ,从 而 
避免 服务 器 不 必要 的 响应 开支 ,而 且 页 面 无 刷新 就 可 以 提示 用 户 重新 填写 信息 ,用 户 体验 
更 佳 。 

本 节 将 通过 JavaScript 脚本 实现 用 户 输入 数据 是 否 为 空 的 校 验 。 打 开 之 前 创建 的 登录 
页 面 index. html, 并 修改 代码 如 下 。 

<! DOCTYPE html > 


<html> 
<head> 
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<meta charset = "utf 一 8"> 


< link href = "style/leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 


< style type= "text/css"> 

body(text - align: center;] 

# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
<script type = "text/javascript"> 

function check( ) { 


if (document. getElementsByName ( 'email') [0]. value == 


getElementsByName( ‘password ')[0]. value == '') { 
alert ( ' 请 填写 完整 登录 信息 '); 
return false; 
ie 
} 
</script> 
</head> 
< body> 
<div id= "login - box"> 
< hl > 一 个 登录 DEMO </hl > 
< form action = "" meth od = "post"> 
<ul class = "lee- form - normal" 
«li» 


<div class = "lee - input"> 


< label > 邮箱 </label > 
< input type = "text" name = "email" value = ""> 
«/div» 
</li> 
<li> 
<div class = "lee- input"> 
< label > 密码 </label > 
< input type = "password " name = "password " value = ""> 
</div> 
</li> 
<li> 


'" | | document. 


< input class = "lee - button" style = "width :80px" type = "button" value = "#2 


JE" onclick = "check()"> 
</li> 
</ul> 
</form> 
</div> 
</body > 
</html> 


打开 该 网 页 ,不 填写 任何 信息 直接 单 击 提交 按钮 ,可 以 看 到 页 面 弹出 的 一 个 补充 完整 信 


息 的 提示 ,如 图 2. 3-3 所 示 。 
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图 2. 3-3 判断 输入 是 否 为 空 


再 来 看 所 添加 的 内 容 其 实 十 分 简单 。 首 先 在 head 标签 之 间 添 加 检验 内 容 是 否 为 空 的 
校 验 脚本 ,可 以 看 到 在 这 个 文件 中 编写 一 个 名 为 check 的 简易 校 验 函数 。 


< script type = "text/javascript"> 
function check()( 
if (document. getElementsByName ( ' email ') [0]. value == '' | | document. 
getElementsByName( password ')[0].value == '') { 
alert ( ' 请 填写 完整 登录 信息 '); 
return false; 
E 
} 
</script> 
通过 document. getElementsByNameO 3x 4*. DOM 接口 可 以 获取 到 name 为 某 个 值 的 元 素 
的 数组 ,获取 该 数组 中 的 第 一 个 元 素 ,并 获得 它 的 value 属性 document. getElementsByName 
C'email )[0]. value, 如 果 value 为 空 字符 串 的 判断 , 则 弹出 提示 框 ,函数 返回 false 的 作用 是 
阻止 提交 事件 的 发 生 , 因 为 当 type 为 submit 的 按钮 被 单 击 时 网 页 会 自动 跳 转 到 目标 网 址 ， 
但 校 验 不 通过 时 我 们 显然 希望 用 户 能 停留 在 当前 页 面 。 
仅仅 创建 了 这 个 函数 还 不 够 ,还 需要 通过 单 击 事件 来 触发 这 个 函数 ,具体 做 法 是 定义 好 
submit 按钮 单 击 事件 的 回调 函数 , 当 用 户 单 击 这 个 按钮 时 会 执行 定义 好 的 检测 函数 。 


< input class = "lee- button" style = "width :80px" type = "button" value = "提交 " onclick = "check()"> 


回顾 之 前 讲 到 的 各 种 事件 ,如 何 运 用 这 些 事件 去 实现 不 同 的 检测 逻辑 呢 ? 比如 在 输入 
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框 失去 焦点 时 会 触发 onblur 事件 ,如 果 将 onclidk 事件 改 为 onblur 事件 执行 check 函数 ,用 
户 在 编辑 好 某 个 输入 框 并 单 击 其 他 地 方 时 便 会 进行 数据 校 验 , 而 不 是 到 最 后 提交 的 时 候 ,所 
以 说 事件 的 应 用 在 网 页 开发 中 无 处 不 在 ,而 且 是 十 分 灵活 的 。 


2.3.4 使 用 工具 包 和 开发 框架 


在 实际 的 工程 开发 中 要 实现 复杂 的 功能 ,用 原生 的 JavaScript 实现 会 占用 我 们 更 多 的 
时 间 , 所 以 通常 会 使 用 JavaScript 开发 包 或 者 框架 进行 开发 ,不 仅 可 以 减少 工作 量 、 提 高 开 
发 效率 ,并 且 可 以 相对 容易 地 实现 更 友好 的 交互 效果 。 

JQuery 是 一 个 轻 量 级 的 JavaScript 开发 包 , 它 被 广泛 应 用 于 实际 项 目 中 ,在 世界 前 
10000 个 访问 最 多 的 网 站 中 ,有 超过 55% 的 在 使 用 JQuery。JQuery 是 一 个 兼容 多 浏览 器 
的 JavaScript 框架 ,核心 理念 是 “writeless, domore”( 写 得 更 少 , 做 得 更 多 )。JQuery 是 免 
费 、 开 源 的 ,使 用 MIT 许可 协议 。JQuery 的 语法 设计 可 以 使 开发 更 加 便捷 ,例如 操作 文档 
XE .选择 DOM 元 素 、 制 作 动画 效果 .事件 处 理 、 使 用 Ajax 以 及 其 他 功能 。 除 此 以 外 ， 
JQuery 还 提供 APL 让 开发 者 编写 插件 。 其 模块 化 的 使 用 方式 使 开发 者 可 以 很 轻松 地 开发 
出 功能 强大 的 静态 或 动态 网 页 。 可 以 访问 http://jquery. com/ 获 得 它 的 最 新 版 本 并 查阅 相 
关 的 文档 。 

现在 ,基于 JQuery 来 实现 更 加 复杂 的 数据 校 验 ,首先 在 之 前 创建 的 网 站 根 目 录 下 新 建 
一 个 文件 夹 , 命 名 为 js, 该 文件 夹 在 今后 将 专门 用 于 存放 js 脚本 文件 。 然 后 进入 js 目录 ,将 
下 载 好 的 jQuery 文件 复制 到 该 目下 ,同时 新 建文 件 名 为 check. js 的 文件 。 

首先 在 index. html 中 引入 这 两 个 文件 ,Javasript 的 脚本 文件 理论 上 可 以 在 html 标签 
中 的 任何 位 置 引用 ,在 实际 工程 应 用 中 ,有 时 为 了 加 快 页 面 的 显示 速度 ,也 可 以 把 脚本 引用 
放 在 文件 的 末端 ,这 么 做 可 以 让 页 面 更 快 地 显示 出 来 ,具有 更 好 的 用 户 体 验 。 具 体 的 脚本 文 
件 引用 方法 如 下 : 


< script type = "text/javascript" src = "/js/jquery- 2. 10. 1. min. js"></script> 
< script type = "text/javascript" src = "/js/check. js"></script > 


继续 编辑 check. js 文件 ,添加 如 下 代码 : 


$ (document). ready(function (){ 
$ ('#sub').click(function (){ 


var email = $ ('input[nane = "email"]'). val(); 
var password = $ ('input[name = "password "]'). val(); 
var warm - ''; 


if (! check. eaail(enail)) { 
warm += "邮箱 格式 不 正确 ;7 
h 
if (!check psd(password )) ( 
warm += ' 密 码 格式 不 正确 ;'; 
}; 


if (warm == ')( 
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return true; 
} else { 

alert(warm) ; 

return false; 


}) 
}) 
function check_email(value) { 

var reg = /^([a-zA- Z0- 9 V.NV- ]) +\@(([a- zA- Z0-9\- ]) * V.) + ([a- zA- 20-9] 
{2,4}) + $/; 

if(! reg. test (value) ) { 

return false; 

) 

return true; 
) 
function check psd(value)( 

var reg = /[a- zA- Z0 - 9](6,14)/; 

if(!reg.test(value))( 

return false; 
} 
return true; 


} 
修改 index. html 文件 内 容 如 下 : 


<!DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "style/leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type="text/css"> 
body{ text - align: center; } 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
<script type = "text/javascript" src = "js/jquery- 2.10.1.nin. js"></script > 
<script type = "text/javascript" src = "js/check. js"></script > 
</head> 
< body> 
<div id= "login - box"> 
<hl > 一 个 登录 DEMO </hl > 
<form action = "" meth od = "post"> 
<ul class = "lee- form- normal"> 
«li» 
<div class = "lee- input"> 
< label > 邮箱 </label > 
< input type = "text" name = "email" value= ""> 
</div> 
</li> 
<li> 
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<div class = "lee— input"> 
< label > 密码 </label> 
< input type = "password " name = "password " value = ""> 
«/div» 
</li> 
<li> 
« input class = "lee - button" id="sub" style = "width :80px" type = "button" 
value = "提交 "> 
</li> 
</ul> 
</form> 
</div> 
</body > 
</html> 


在 该 文件 中 去 掉 了 submit 按钮 上 的 onclick 部 分 ,而 是 使 用 JQuery 提供 的 选择 器 并 设 
JET JQuery 对 象 的 单 击 事件 的 回调 函数 。 具 体 细 节 为 ,首先 给 submit 按钮 添加 一 个 
id 一 "sub" 用 于 选择 器 的 选择 。$ (document) 选 择 器 获取 document 对 象 , 当 文档 加 载 完成 
时 会 产生 ready 事件 执行 内 部 的 代码 。 

通过 $('# sub") 选 取 表 单 提交 按钮 对 象 , 当 它 被 单 击 的 时 候 会 触发 click 单 击 事件 并 执 
行 函数 体内 的 内 容 。 可 以 看 到 通过 JQuery 插件 实现 了 事件 处 理 和 html 文档 的 分 离 ,使 得 
程序 结构 更 加 清晰 。 

$ (document). ready(function (){ 

$ ('# sub').click(function (){ 


}) 
n 


刷新 页 面 ,在 输入 框 里 输入 一 些 非法 的 字符 串 , 可 以 看 到 进一步 实现 了 文本 格式 的 检 
测 , 这 里 提示 邮箱 格式 错误 ,如 图 2. 3-4 所 示 。 


E77 


2. 3-4 使 用 正则 表达 式 检测 输入 格式 是 否 正确 
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这 里 的 检测 用 到 了 正则 表达 式 的 相关 内 容 , 无 论 在 前 台 还 是 后 台 , 正 则 表达 式 都 被 广泛 
用 于 数据 的 校 验 ,文本 过 滤 等 方面 ,关于 正则 表达 式 的 详细 内 容 这 里 不 再 展开 , 想 进一步 了 
解 正则 表示 式 的 使 用 方法 ,请 查阅 相关 资料 。 


2.3.5 使 用 插件 加 速 开 发 


前 面 已 经 演示 了 如 何 使 用 JQuery 开发 包 来 进行 开发 ,使 用 框架 或 者 开发 包 开 发 可 以 
缩短 开发 周期 并 生产 出 更 加 高 质量 的 代码 ,本 节 将 进一步 演示 如 何 使 用 一 个 JQuery 插件 
来 实现 相关 功能 。 在 实际 开发 中 ,开发 者 往往 可 以 按 插 件 的 形式 来 实现 功能 ,这 么 做 的 好 处 
是 可 以 增加 代码 的 重用 性 ,并 降低 程序 各 个 模块 间 的 耦合 , 当 我 们 在 其 他 项 目 中 需要 用 到 类 
似 的 功能 时 ,可 以 直接 使 用 之 前 写 好 的 插件 就 可 以 实现 相同 的 功能 。 

这 里 将 使 用 leeui 前 端 框架 中 预先 写 好 的 lee-form-format. js 插件 来 实现 登录 的 检测 功 
能 。 首 先 取消 之 前 创建 的 check. js 文件 的 引用 代码 ,并 引入 新 的 插件 引用 代码 。 


<!DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "style/leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type = "text/css"> 
body{ text - align: center; } 
# login- box(width :310px;margin:0 auto;margin- top: 100px; } 
</style> 
< script type = "text/javascript" src = "js/jquery- 2. 10. 1. min. js"></script > 
< script type = "text/javascript" src = "style/leeui/js/jquery. leeformat. js"></script > 
</head> 
< body> 
<div id= "login - box"> 
<hl > 一 个 登录 DEMO «/h1 > 


< form action = "" meth od = "post"> 
<ul class = "lee- forn- normal"> 
«li» 


<div class = "lee- input" 


< label > 邮箱 </label > 
< input class = "leeFormat - email" type = "text" name = "email" value = ""> 
</div> 
</li> 
«li» 


<div class = "lee- input" 

< label > 密码 </label > 

< input class = "leeFormat - password " type = "password " name = "password 
" value = ""> 
</div> 
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</li> 
<li> 
< input class = "lee - button" id= "sub" style="width :80px" type = "button" 
value = "提交 "> 
</li> 
</ul> 
</form> 
<script type = "text/javascript"> 
$ ('# sub').click(function () { 
return $ ('.lee- form- normal'). leeFormat() ; 
n; 
</script> 
</div> 
</body> 
</html> 


如 图 2. 3-5 所 示 , 刷 新 页 面 ,输入 非法 字符 提交 ,可 以 看 到 我 们 实现 了 更 加 美观 的 信息 
提示 ,而 不 是 简单 地 进行 信息 的 弹出 ,而 且 自 编 了 更 少 的 代码 。 对 于 插件 本 身 使 用 方法 和 实 
现 ,这 里 不 做 介绍 了 ,如 果 你 想 了 解 其 中 的 细节 可 以 自行 阅读 本 书 提供 的 代码 。 


2.3-5 使 用 插件 进行 表单 验证 


这 个 例子 不 是 为 了 讲解 插件 的 使 用 方法 ,而 是 让 读者 了 解 使 用 插件 的 优势 ,在 今后 的 开 
发 中 可 以 尝试 以 插件 的 形式 实现 想 要 的 功能 加 快 开 发 速度 ,也 应 该 注意 如 何 编写 重用 性 更 
强 的 代码 这 个 问题 ,这 对 开发 者 的 学 习 有 很 大 的 帮助 。 
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2.3.6 总结 和 深入 学 习 


本 章 通过 一 个 登录 框 输入 检测 的 例子 ,首先 讲解 了 如 何 使 用 原生 的 JavaScript 脚本 实 
现 用 户 输入 内 容 的 校 验 , 然 后 通过 使 用 框架 实现 相同 的 功能 ,最 后 介绍 了 如 何 使 用 插件 更 加 
方便 地 开发 。 因 为 篇 幅 有 限 ,没有 进一步 地 深入 展开 更 高 级 的 细节 技术 讲解 ,而 是 简单 介绍 
了 基本 的 用 法 。 如 果 要 进行 大 型 项 目的 开发 ,还 需要 进一步 学 习 和 练习 ,请 查阅 相关 资料 。 

如 果 仅 仅 是 想 使 用 JavaScript 脚本 作为 辅助 技能 进行 开发 ,推荐 读者 熟悉 并 使 用 一 个 
JavaScript 框架 , 它 能 完成 大 多 数 的 工作 。 但 如 果 是 出 于 学 习 的 考虑 , 想 进一步 精通 该 语 
Tí ,在 熟悉 框架 的 同时 ,更 应 该 注重 脚本 原生 写法 的 学 习 。 

在 本 章 开头 已 经 提 到 WebGis 应 用 对 前 端 开 发 有 着 更 高 的 技术 要 求 , 随 着 应 用 场景 的 
不 断 变化 ,前端 技术 也 得 到 了 很 大 的 发 展 , 如 果 你 想 进一步 深入 学 习 前 端 开 发 来 完成 一 些 重 
型 的 Web 应 用 ,除了 本 章 介绍 的 基本 布局 和 脚本 应 用 知识 外 ,可 以 从 以 下 方面 着 手 : 

(1) T fit JavaScript 的 模块 化 编程 方法 ,在 大 型 项 目 中 ,特别 是 WebGIS 应 用 中 模块 化 
的 编程 方法 可 以 解决 文件 之 间 相互 的 依赖 文件 ,使 得 工程 结构 更 加 清楚 有 条 理 , 便 于 后 期 维 
护 和 开发 升级 ,其 中 常用 的 工具 有 require. js、sae. js 等 。 

(2) 熟悉 一 个 MVC 前 端 开发 框架 将 对 开发 SPA 单 页 应 用 于 很 大 的 帮助 ,常用 的 框架 
有 AngularJs, Backbone 等 。 

(3) CSS 框架 可 以 让 你 更 灵活 地 编写 css 文件 ,并 在 其 中 加 入 编程 逻辑 ,常用 的 有 less 
和 sass。 

本 书 关于 Web 前 端 开发 的 介绍 到 此 结束 ,第 3 章 将 开始 介绍 Web 服务 器 端 开发 的 基 
础 知识 。 


PES 


Hy 


JavaWeb 服务 器 端 开发 基础 


3.1 建立 开发 平台 


3.1.1 安装 JDK 
在 正式 开始 开发 Java 程序 之 前 ,要 先 安装 好 JDK ,首先 进入 官方 网 站 下 载 最 新 版 本 的 


JDK( 地 址 为 http://www. oracle. com/technetwork/java/javase/downloads/index. html) 。 
安装 完成 后 需要 确认 安装 是 否 成 功 , 打 开 CMD, 输 入 java-version ,如果 可 以 看 到 Java 的 版 
本 信息 说 明 安装 已 经 成 功 了 ,如 图 3. 1-1 所 示 。 


画 C:\Windows\system32\cmd.exe la! g j 
n 


oft Windows ETE " 
<c) 2009 Micros: Corporation。 保 留 所 有 权利 


nment (build 1.8.8 11-b12) 
Mava HotSpot<TM) 64-Bit Server UM Cbuild 25.11-b03, mixed mode? 


图 3. 1-1 检验 是 否 安装 成 功 


安装 成 功 后 继续 配置 Java 的 环境 变量 以 便 让 系统 知道 JDK 的 具体 位 置 。 打 开 * 我 的 
电脑 一 属性 一 高 级 系统 设置 一 高 级 ”, 单 击 环境 变量 按钮 进行 环境 变量 的 设置 ,如 图 3. 1-2 
所 示 。 

在 系统 变量 中 添加 一 个 新 的 变量 JAVA_HOME, 并 设置 其 值 为 JDK 的 安装 目录 ,可 以 
直接 用 文件 浏览 器 打开 相关 目录 直接 复制 文件 路 径 粘 贴 。 然 后 将 JAVA_HOME 添加 到 系 
统 变量 Path 之 中 ,具体 方法 是 编辑 打开 系统 变量 Path, 在 原 有 的 变量 值 前 添加 双 引 号 内 的 
代码 *%JAVA_HOME %/bin;”, 其 中 的 分 号 起 分 隔 作 用 ,不 可 缺少 ,如 图 3. 1-3 所 示 。 


3.1.2 安装 Tomcat 


在 进行 Java Web 开发 之 前 ,还 需要 安装 服务 器 软件 Tomcat. Tomcat 是 一 个 免费 的 开 
放 源 代 码 的 Web 应 用 服务 器 ,属于 轻 量 级 应 用 服务 器 。 首 先进 入 Tomcat 的 官方 网 站 下 载 
其 安装 包 。 安 装 过 程 中 用 户 可 以 选择 需要 安装 的 组 件 ,一 般 选 择 默 认 即 可 ,进入 下 一 步 , 设 
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置 Tomcat 的 常用 端口 ,一般 采用 默认 端口 。 如 果 你 的 计算 机 某 些 端 口 已 经 被 其 他 软件 占 
用 ,也 可 以 改 用 其 他 端口 。 此 外 ,也 可 以 设置 Tomcat 的 用 户 账号 和 密码 加 强 其 安全 性 ,在 
测试 环境 中 一 般 采 用 默认 设置 。 


要 进行 大 多 更改， 您 必须 作为 管理 只 痘 录 。 | 
| tes a n 
[3 


XUSERPEOFILESAAppDat a\Local \Temp 
‘WUSERPROFILES\AppDat a\Local \Temp 


性 能 
视觉 效果 ， 处 理 器 计划 ， 内 存 使 用 ， 以 及 虚拟 内 存 


用 户 配置 文件 
与 您 登录 有 关 的 点 面 设置 


ECTONSIU [78 


启动 和 故障 恢复 
系统 启动 、 系 统 失败 和 调试 信息 


ConSpec 
FP NO HOST C. 
INRER D PR 


: Windows sys ten32 Vend. exe 


ff 
D:\arcgis\Server\ 
c 

加 

4 


(ton) 


图 3. 1-2 设置 环境 变量 (1) 图 3.1-3 设置 环境 变量 (2) 


进入 下 一 步 ,选择 Java 虚拟 机 的 安装 路 径 。 因 为 Tomcat 在 执行 Java 应 用 的 时 候 需 要 
调用 Jre 去 执行 Java 字 节 码 ,而 之 前 已 经 安装 好 了 JDK A JRE 并 且 设 置 好 了 环境 变量 ,所 
以 这 一 步 一 般 会 自动 填写 好 路 径 。 如 果 安 装 包 没有 自动 寻找 到 JRE 的 路 径 , 请 检查 前 面 的 
安装 和 设置 工作 是 否 完成 或 者 手动 选择 路 径 。 

进入 下 一 步 ,选择 Tomcat 的 安装 路 径 , 可 以 自 定 义 一 个 安装 路 径 来 安装 Tomca。 最 后 
单 击 * 安 装 ? 按 钮 ,等待 片 刻 后 显示 安装 完成 。 

单 击 “ 完 成 ”按钮 Tomcat 便 会 启动 , 单 击 系统 右 下 角 的 Tomcat 图 标 会 弹出 可 视 化 管理 
界面 ,可 以 停止 或 启动 它 的 服务 并 进行 一 些 常 用 的 设置 ,如 图 3. 1-4 所 示 。 

最 后 ,打开 浏览 器 ,输入 地 址 查看 安装 是 否 成 功 , 如 果 可 以 显示 图 3. 1-5 所 示 的 界面 ,说 
明 Tomcat 已 经 可 以 正常 工作 了 。 


3.1.3 安装 PostgreSQL 数据 库 


数据 库 的 种 类 很 多 ,比如 流行 的 MySQL 、 企 业 级 的 Oracle 等 ,本 书 以 PostgreSQL 为 例 
讲解 数据 库 的 安装 。PostgreSQL 是 以 加 州 大 学 伯克利 分 校 计算 机 系 开 发 的 对 象 关系 型 数 
据 库 管理 系统 。 它 支持 大 部 分 SQL 标准 并 且 拥 有 许多 其 他 现代 特性 : 复杂 查询 、 外 键 、 触 
发 器 ,视图 、 事 务 完整 性 .MVCC。 同 样 .PostgreSQL 可 以 用 许多 方法 扩展 ,不 管 是 私 用 、 商 
用 、 还 是 学 术 研究 使 用 ,比如 通过 增加 新 的 数据 类 型 函数、 操作 符 、 聚 集 函 数 、 索 引 免 费 使 
用 、 修 改 和 分 发 PostgreSQL. 
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[G tome omen 80 Tomei opens LEE] 
General [Log On] Legeing [eva [Startup | stie] 


Service Name: — Tomcat8 


Display name: Apache Tomcat 8.0 Tomcat8 
Description: Apache Tomcat 8.0.9 Server - http://tomcat.apache.or 


Path to executable: 
[c:\Program Files\Apache Software Foundation Tomcat 8.0\bin Tomcat. 


Er 
Home Documentation Configuration Examples Wiki Mailing Lists 
Apache Tomcat/8.0.9 The Apache Software Foundation 


http://www.apache.org/ 


If you're seeing this, you've successfully installed Tomcat. Congratulations! 


™ Recommended Reading: 
Security Considerations HOW-TO 
Manager Application HOW-TO 
Clustering/Session Replication HOW-TO 


Developer Quick Start 


Getting Help 
FAQ and Mailing Lists 


图 3. 1-5 Tomcat 成 功 启动 的 界面 


首先 ,进入 PostgreSQL 官方 网 站 http://www. postgresql. org/ ,下 载 最 新 的 安装 包 ， 
下 载 完 成 后 单 击 安装 包 进 入 安装 界面 。 
进入 “下 一 步 ”, 选 择 数 据 库 的 安装 目录 .。 
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进入 “下 一 步 ”, 选 择 数 据 文件 的 存放 位 置 , 默 认为 数据 库 安装 目录 下 ,也 可 以 自 定义 。 
进入 “下 一 步 ”, 设 置 数据 库 管 理 员 的 密码 。 

设置 数据 库 的 访问 端口 ,默认 为 5432, 也 可 以 根据 需要 改 成 其 他 端口 。 

进入 “下 一 步 ” 选 择 所 在 区 域 , 可 以 直接 选择 默认 选项 ,最 后 单 击 “ 安 装 "完成 安装 。 


3.1.4 安装 Eclipse 


在 进行 开发 前 ,首先 要 选择 一 个 集成 开发 环境 ,这 能 给 开发 工作 带 来 很 多 方便 ,本 书 中 
选择 普遍 使 用 的 Eclipse 来 进行 Java 的 开发 ,首先 进入 其 官方 网 站 下 载 http://www. 
eclipse. org/home/index. php. 

Eclipse 是 一 个 很 受 欢迎 的 开发 软件 ,因此 其 版 本 也 十 分 多 ,为 了 方便 进行 Java 开发 ， 
选择 JavaEE 的 版 本 , 它 与 其 他 版 本 的 区 别 是 默认 集成 了 一 些 开 发 Java 程序 需要 用 到 的 插 
件 , 可 以 省 去 自行 安装 的 麻烦 。 


3.2 MVC 模式 及 对 象 持 久 化 


3.2.1 开发 框架 简介 


在 了 解 MVC 之 前 ,首先 来 了 解 框架 的 概念 。 要 理解 框架 的 含义 得 从 开发 的 实际 需求 
说 起 。 在 软件 开发 过 程 中 总 有 很 多 基础 的 功能 是 相同 或 者 相近 的 ,所 以 在 实际 开发 中 再 花 
费时 间 重 复 基 础 工作 显然 是 人 们 不 愿意 做 的 事情 ,所 以 开发 者 们 将 一 些 可 重用 的 、 易 扩展 
的 ,并 且 经 过 良好 测试 的 组 件 独立 出 来 抽象 成 一 个 框架 , 当 开 发 新 的 项 目 时 便 可 以 直接 基于 
框架 开发 ,可 以 有 更 多 的 精力 放 在 分 析 和 构建 业务 逮 辑 上 ,从 而 避免 繁琐 的 底层 事务 和 代码 
工程 ,这 就 是 框架 的 由 来 。 


3.2.2 MVC 的 层 结构 


MVC 是 Model View Controller 的 缩写 ,是 一 种 开发 模式 ,因为 其 合理 的 设计 ,诞生 了 
很 多 以 MVC 开发 模式 为 主导 的 框架 , 称 为 MVC 框架 ,如 图 3. 2-1 所 示 。 

(D Model( 模 型 ) : 表示 程序 的 核心 ,处 理 一 些 底层 的 业务 迎 辑 。 

(2) View( 视 图 ): 显示 页 面 数 据 。 

(3) Controller( 控 制 器 ) : 控制 输入 /输出 ,协调 各 个 层 的 关系 。 


3.2.3 对象 关系 映射 ORM 技术 


虽然 关系 型 数据 库 已 经 大 大 地 方便 了 程序 员 进 行程 序 开 发 ,但 在 一 些 大 型 的 项 目 中 数 
据 关 系 比较 复杂 ,业务 逻辑 要 求 可 能 更 多 ,此 时 再 从 底层 进行 数据 库 的 操作 显得 比较 费事 ， 
于 是 人 们 提出 了 ORM(Object Relational Mapping) 技 术 . 它 是 一 种 将 关系 型 数据 映射 到 类 
的 技术 。 使 用 ORM 技术 进行 开发 ,程序 员 不 需要 去 处 理 繁琐 的 底层 数据 ,而 是 通过 映射 类 
进行 数据 操作 ,更 加 符合 软件 工程 面向 对 象 的 思想 。 使 用 ORM 技术 ,开发 者 可 以 访问 到 底 
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(起 始点 ) 
___ HATES __ 用 户 获得 反馈 
用 户 输入 


1 1 
人 机 交互 人 机 安 互 ”将 结果 反馈 给 用 户 
1 
等 待 用 户 输入 | 1 
SUBEN ( 形成 一 个 闭环 ) 
View 
视图 


Controller 


控制 器 


bU Aa 根据 业务 逻辑 
递 给 业务 模型 Model 选择 不 同 的 规则 
模型 


进行 业务 逻辑 判断 、 | 
数据 库存 储 


图 3. 2-1 MVC 基本 结构 
层 的 数据 ,但 完全 不 用 去 关心 底层 数据 的 结构 ,这 个 过 程 也 可 以 称 为 持久 化 的 过 程 。 
3.2.4 SSH 集成 开发 框架 


SSH 为 Struts 十 Spring 十 Hibernate 的 一 个 集成 框架 ,是 目前 较 流 行 的 一 种 Web 应 用 
程序 开源 框架 。Struts2 是 一 个 Java 的 MVCWeb 开发 框架 ,Struts2 以 WebWork 为 核心 ， 
采用 拦截 器 的 机 制 来 处 理 用 户 的 请 求 ,这 样 的 设计 也 使 得 业务 逻辑 控制 器 能 够 与 
ServletAPI 完全 脱离 开 。Spring 是 一 个 开源 框架 ,是 为 了 解决 企业 应 用 程序 开发 复杂 性 而 
创建 的 。Hibernate 是 一 个 开放 源 代码 的 对 象 关系 映射 框架 , 它 对 JDBC 进行 了 轻 量 级 的 对 
象 封装 ,使 得 Java 程序 员 可 以 随心 所 欲 地 使 用 对 象 编程 思维 来 操作 数据 库 。Hibernate 可 
以 应 用 在 任何 使 用 JDBC 的 场合 , 既 可 以 在 Java 的 客户 端 使 用 ,也 可 以 在 Servlet/JSP 的 
Web 应 用 中 使 用 。 


3.3 Struts2 框架 的 使 用 


3.3.1 Struts2 框架 的 下 载 及 部 署 


在 使 用 Struts2 前 需要 去 官网 下 载 最 新 的 框架 包 , 地址 为 http://struts. apache. org/ 
release/2. 0. x/ 。 可 以 选择 下 载 完整 包 , 里 面 除了 包含 必需 的 文件 外 还 包含 了 文档 和 案例 ,也 
可 以 选择 只 下 载运 行 包 。 这 里 选择 下 载 完 整 的 压缩 包 , 解 压 后 会 看 到 目录 结构 如 图 3. 3-1 
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名 称 修改 日 期 美 型 大 小 

di apps 2014/5/2 18:04 文人 去 

di docs 2014/5/21804 RHR 

di ib 2014/5/21804 = ABE 

di src 2014/5/2 18:04 文件 夫 

B ANTLR-LICENSE.txt. 2014/5/2 17:19 文本 文档 2 KB 
B CLASSWORLDS-LICENSE.txt. 2014/5/2 17:19 文本 文档 2KB 
B FREEMARKER-LICENSE.txt. 2014/5/2 17:19 文本 文档 3 KB 
Ej uceNsE.s« 2014/5/21719 文本 文档 10 KB 
Ei NOTICE. bt 2014/5/2 17:19 文本 文档 1KB 
Ej OGNL-LICENSE. S 2014/5/21719 SENS 3KB 
E ovAL-UCENSE.bt 2014/5/2 17:19 文本 文档 12 KB 
Ej SITEMESH-LICENSE.b« 2014/5/2 17:19 文本 文档 3 KB 
E xpp3-UCENSE.bt 2014/5/2 17:19 XER 3 KB 
国 XSTREAM-LICENSE.tt 2014/5/217:19 文本 文档 2 KB 


图 3. 3-1 Struts2 的 框架 包 


所 示 。 

需要 用 到 的 是 lib 文件 夹 下 的 jar 文件 ,现在 复制 这 些 文件 到 之 前 新 建 的 工程 中 的 
WebContent/WEB-INF/lib 文件 夹 下 ,以 便 在 工程 中 使 用 这 些 文件 。lib 文件 夹 中 通常 会 放 
ETR EI SEI jar 文件 ,引用 相关 的 Java 类 时 会 自动 加 载 该 文件 夹 下 的 资源 ,可 以 理解 
为 一 个 资源 库 ,需要 什么 取 什么 。 

在 Eclipse 中 刷新 之 前 的 工程 可 以 看 到 在 WebAppLibraries 节点 下 复制 过 来 的 jar X 
件 , 说 明 已 经 成 功 将 Struts2 的 文件 部 署 到 了 工程 中 ,如 果 不 能 看 到 文件 请 重新 检查 复制 的 
路 径 是 否 正确 。 

Struts2 框架 的 部 署 本 质 上 就 是 将 文件 添加 到 我 们 的 工程 中 以 便 调 用 而 已 ,而 在 很 多 书 
中 可 能 会 将 该 过 程 描述 为 安装 的 过 程 , 将 简单 的 过 程 抽 象 了 ,十 分 不 利于 学 习 , 这 点 读者 需 
要 清楚 。 

3.3.2 Struts2 配置 


在 部 署 好 了 相关 的 Struts2 文件 后 只 是 做 好 了 预备 工作 ,只 有 框架 是 不 能 够 运行 出 什 
么 效果 的 ,现在 需要 进一步 对 框架 进行 配置 才能 使 其 工作 。 

从 前 面 讲述 JSP 显示 简单 页 面 的 内 容 已 经 知道 ,我 们 不 需要 任何 配置 文件 ,只 需要 在 
应 用 的 根 目录 下 建立 新 的 JSP 文件 ,然后 通过 网 址 /文件 名 就 可 以 访问 动态 页 面 了 ,这 是 最 
基本 的 Web 开发 形式 ,因为 和 本 地 浏览 文档 的 迎 辑 几乎 一 样 。 但 复杂 的 Web 程序 通常 不 
会 以 文件 为 地 址 单位 进行 开发 ,这 不 利于 项 目的 开发 和 维护 ,并 且 会 暴露 工程 的 目录 结构 。 
通常 会 统一 使 用 一 个 路 口 来 管理 应 用 的 访问 ,这 好 比 进入 一 幢 楼 的 某 个 房间 必须 先 经 过 大 门 
一 样 ,而 不 是 直接 就 能 进入 某 个 房间 。 在 Java Web 开发 中 ,扮演 入 口角 色 的 通常 是 web. xml 
文件 ,在 里 面 可 以 进行 工程 的 各 种 配置 工作 ,所 以 想 要 让 Struts2 的 框架 正常 工作 起 来 , 首 
先 要 配置 web. xml 这 张 地 图 ,只 有 通过 web. xml 程序 才能 找到 Struts2 MAM, 

在 WEB-INF 文件 夹 新 建 一 个 web. xml 文件 。 编 辑 该 文件 如 下 : 
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<?xml version = "1.0" encoding = "UTF 一 8"?> 
« web - app id= "WebApp 9" version = "2.4" xmlns = "http://java. sun. com/xml/ns/j2ee" xmlns:xsi 
= "http://www. w3. org/2001/XMLSchema — instance" xsi: schemaLocation = "http://java. sun. com/ 
xn1/ns/j2ee http: // java. sun. con/xn1/ns/j2ee/web - app 2 4. xsd"> 
< display- name > Struts Blank «/display — name> 
«filter» 
< filter - name> struts2 </filter - name> 
«filter - class? 
org. apache. struts2. dispatcher. ng. filter. StrutsPrepareAndExecuteFilter 
</filter - class» 
</filter> 
<filter - mapping» 
< filter - name > struts2 </filter - name> 
« url- pattern»/ * </url - pattern» 
</filter - mapping? 
< welcone- file- list» 
< welcome - file» index. html </welcome - file> 
«/welcone- file- list > 
«/web - app» 


这 里 要 提醒 的 是 ,不 同 版 本 的 Struts2 可 能 文件 的 配置 会 略 有 不 同 ,所 以 在 下 载 完 新 版 
本 的 Struts2 后 使 用 本 书 或 者 其 他 资料 中 的 文件 未 必 正 确 , 最 好 的 方法 是 参考 查看 下 载 文 
件 中 的 webapp 范例 中 的 配置 文件 。 

可 以 看 到 ,该 文件 中 添加 了 一 个 过 滤器 ,将 过 滤 所 有 访问 请 求 ,和 filtername>struts2 
</filter-name> ji J] f zit üE RI 44 FH struts2. Mi <url-pattern>/ * </url-pattern> 
指明 了 过 滤 的 路 径 为 工程 下 的 所 有 访问 路 径 , 这 里 用 到 的 正则 表达 ,/ 表 示 为 根 目 录 , 而 * 用 
于 匹配 所 有 字符 。 

在 filter 标签 中 声明 了 该 过 滤器 用 到 的 类 为 org. apache. struts2. dispatcher. ng. filter. 
StrutsPrepareAndExecuteFilter, 这 个 类 就 在 之 前 添加 到 lib 文件 夹 中 的 jar 文件 中 。 现 在 
来 总 结 web. xml 将 如 何 工作 , 当 用 户 访问 我 们 的 应 用 时 会 先 经 过 预定 好 的 Struts2 过 滤器 ， 
org. apache. struts2. dispatcher. ng. filter. StrutsPrepareAndExecuteFilter 过 滤器 类 会 将 所 
有 的 访问 请 求全 部 转交 给 Struts2 处 理 。 

同样 ,Struts2 本 身 也 有 自己 的 xml 配置 文件 ,担当 着 类 似 web. xml 的 作用 ,在 src 文件 
夹 下 再 新 建 一 个 名 为 struts. xml 的 文件 。 编 辑 该 文件 内 容 如 下 : 

<?xml version = "1.0" encoding = "UTF - 8" ?> 

<! DOCTYPE struts PUBLIC 

" — //Bpache Software Foundation//DTD Struts Configuration 3.3//EN" 
"http: //struts. apache. org/dtd s/struts — 3.3. dtd "> 
«struts» 
< constant name = "struts. enable. DynamicMeth odInvocation" value = "false" /> 


< constant name = "struts.devMode" value = "true" /> 
< package name = "default" namespace = "/" extends = "struts — default"> 
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</package > 
</struts> 


在 该 文件 中 添加 了 一 个 package, 命 名 为 helloworld, TE struts. xml 文件 中 ,package 起 
着 分 类 管理 Action 的 作用 ,对 于 大 型 的 项 目 ,将 所 有 的 action 放置 在 一 起 显然 会 让 人 眼花 
BEAL ,不 利于 开发 和 维护 ,有 了 Action 便 可 以 对 它们 进行 分 类 管理 。 


3.3.3 创建 第 一 个 Action 实例 


现在 开始 编写 第 一 个 Action 类 , 右 击 sre 节点 , 单 击 New 一 Class。 在 弹出 的 对 话 框 中 
填写 类 名 为 HelloWorld。 然 后 单 击 Finish 按钮 完成 类 的 新 建 ,如 图 3. 3-2 所 示 。 


Ee x J 


y Type name is discouraged. By convention, Java type names usually start with 
| an uppercase letter 


Source folder: — mypro/src 
Package: 


E Enclosing type: 


Which method stubs would you like to create? 


© public static void main(String[] args) 


Do you want to add comments? (Configure templates and default value here) 
E Generate comments 


[rnin NN ] 
图 3. 3-2 设置 类 的 信息 
可 以 看 到 在 src 节点 下 的 mypro 包 中 新 建 了 一 个 Java 文件 。 编 辑 这 个 文件 如 下 : 


package mypro; 


import com. opensymphony. xwork2. ActionSupport; 
public class helloWorld extends ActionSupport ( 
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public String message - "Hello, world!"; 
public String execute() throws Exception { 
return SUCCESS; 
} 
} 


现在 已 经 编写 完了 一 个 最 基本 的 Action 类 ,在 这 个 类 中 ,添加 了 一 个 名 为 execute() 的 
方法 ,在 Action 类 被 执行 的 时 候 它 会 默认 执行 这 个 方法 来 处 理 客户 端 发 送 的 请 求 。 

编写 完 Action 类 后 还 需要 创建 一 个 视图 文件 ,用 于 显示 返回 的 内 容 。 在 WebConent 
文件 夹 下 新 建 一 个 templets 的 文件 夹 用 于 放置 模板 文件 ,在 该 文件 夹 下 新 建 一 个 
HelloWorld. jsp 的 文件 。 需 要 提醒 的 是 ,文件 的 设 定 和 命名 并 不 是 固定 的 ,实际 开发 中 可 
以 根据 项 目的 规划 来 自己 设 定 目录 的 结构 。 编 辑 这 个 文件 的 内 容 如 下 : 


<% @ taglib prefix- "s" uri = "/struts - tags" % > 
<html> 
€ head» 
«title» Hello World!</title> 
</head> 
< body> 
<h2> 
< s:property value = "message" /> 
</h2> 
</body> 
</html> 


第 一 行 的 作用 是 使 得 该 页 面 可 以 支持 Struts2 特有 的 标签 ,通过 Struts2 的 property 标 
签 可 以 输出 相关 的 信息 ,这 些 信 息 一 般 为 所 对 应 的 Action 类 中 的 成 员 变 量 , 到 这 里 一 个 基 
本 的 Action 和 它 的 视图 就 完成 了 , 接 下 来 将 去 实现 在 浏览 器 中 显示 出 添加 的 页 面 。 


3.3.4 使 用 Struts2 的 动作 


最 后 实现 Action 的 工作 需要 在 struts. xml 文件 中 添加 相关 配置 ,前 面 已 经 说 了 在 
JavaWeb 工程 中 xml 文件 相当 于 一 张 地 图 ,只 有 在 地 图 中 注册 了 相关 信息 ,程序 才 知 道 该 
在 什么 时 候 以 及 什么 情况 执行 什么 内 容 。 打 开 该 文件 添加 Action 配置 内 容 , 文 件 修改 
如 下 : 


<?xml version = "1.0" encoding = "UTF- 8" ?> 

<! DOCTYPE struts PUBLIC 
" — //Bpache Software Foundation//DTD Struts Configuration 3.3//EN" 
"http: //struts. apache. org/dtd s/struts - 3.3. dtd "> 

«struts» 

< constant name = "struts. enable. DynamicMeth odInvocation" value = "false" /> 

< constant name = "struts. devMode" value = "true" /> 

< package name = "default" namespace = "/" extends = "struts - default"> 

< default - action- ref name = "index" /> 
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« global- results» 
< result nane = "error"»/error. jsp</result > 
«/global- results > 
< global- exception — mappings > 
< exception - mapping exception = "java. lang. Exception" result = "error" /> 
«/global- exception - mappings > 
<action name = "helloWorld" class = "mypro. helloWorld"> 
< result >/templets/helloWorld. jsp</result > 
</action> 
</package > 
</struts> 


该 文件 中 添加 了 一 个 Action 标签 ,命名 为 HelloWorld ,并 指明 了 该 动作 对 应 的 Action 
类 为 mypro. HelloWorld, ~“4i% Action 执行 完毕 后 会 跳 转 到 /templets/HelloWorld. jsp 这 
个 模板 文件 返回 给 前 台 显 示 。 

启动 本 地 的 server, 打 开 浏 览 器 输入 地 址 http://localhost: 8080/mypro/helloWorld. 
action, 可 以 看 到 数据 已 经 正确 地 被 显示 出 来 了 ,如 图 3. 3-3 所 示 。 


f = z J) 
CB E hpo 8 A~ BS X || & Heloworid! x fk 


HelloWorld! 


3.3-3 使 用 Action 显示 HelloWorld 


3.3.5 通过 Action 接收 前 台数 据 


在 进一步 深入 学 习 相关 知识 前 ,让 我 们 重新 部 署 之 前 编写 的 登录 界面 ,以 便 更 好 地 进行 
效果 演示 。 首 先 在 templets 下 新 建 一 个 文件 夹 login. jsp ,并 将 之 前 编写 的 HTML 登录 界 
面 复制 进去 。 


<% @ page language = "java" contentType = "text/html; charset = UTF — 8" 
pageEncoding = "UTF - 8" > 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/ TR/htn14/ 
loose. dtd "> 
<head> 
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« neta charset = "utf 一 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
< style type = "text/css"> 
body(text - align: center;] 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "login - box"> 
<hl > 基于 struts2 的 登录 DEMO «/h1 > 
<form action = "" meth od = "post"> 
<ul class = "lee- form - normal"» 
«li» 
<div class = "lee - input"> 


< label > 邮箱 </label > 
< input type = "text" name = "email" value = ""» 
</div> 
</li> 
<li> 


<div class = "lee- input"> 


< label > 密码 </label > 
< input type = "password " name = "password " value = ""> 
</div> 
</li> 
<li> 
< input class = "lee- button" style = "width :80px" type = "submit" value = "提交 "> 
</li> 
</ul> 
</form> 
</div> 
</body > 
</html> 
然后 将 leeui 的 文件 夹 放置 到 WebContent 根 目录 下 ,新 建 一 个 login 的 Java 类 ,编辑 内 容 
如 下 : 
package mypro; 


import com. opensymphony. xwork2. ActionSupport; 
public class login extends ActionSupport { 
public String execute() throws Exception { 
return SUCCESS; 

} 
} 


修改 struts. xml 配置 文件 ,在 其 中 添加 一 个 新 的 Action: 


<?xml version = "1.0" encoding = "UTF — 8" ?> 
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<! DOCTYPE struts PUBLIC 
"— //Rpache Software Foundation//DTD Struts Configuration 3.3//EN" 
"http: //struts. apache. org/dtd s/struts - 3. 3. dtd "> 
< struts > 
< constant name = "struts. enable. DynamicMeth odInvocation" value = "false" /> 
< constant name = "struts. devMode" value = "true" /> 
< package name = "default" namespace = "/" extends = "struts - default"> 
< default — action - ref name = "index" /> 
< global - results > 
< result name = "error">/error. jsp</result > 
«/global- results > 
< global - exception - mappings > 
< exception — mapping exception = "java. lang. Exception" result = "error"/> 
«/global- exception — mappings > 
< action name = "helloWorld" class = "mypro. helloWorld"> 
< result >/templets/helloWorld. jsp</result > 
</action> 
< action name = "login" class = "mypro. login"> 
< result >/templets/login. jsp </result > 
</action> 
</package > 
</struts > 


这 样 就 完成 了 一 个 基本 登录 Action 的 编写 了 ,重启 服务 器 在 浏览 器 输入 地 址 http: // 
localhost :8080/mypro/login, 408 fig Sb AS Al 3. 3-4 所 示 页 面 就 说 明 新 添加 的 Action 已 经 成 
功 工作 了 。 


B ntpyVoc- 8 O ~ BSC X || E localhost x Ü 


基于 Struts2 的 登录 DEMO 


密码 


图 3. 3-4 通过 Action 显示 登录 界面 
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接 下 来 继续 实现 下 一 项 功能 : 通过 这 个 登录 页 面 将 用 户 输入 的 邮箱 和 密码 信息 发 送 到 
后 台 并 且 显 示 出 来 。 创 建 一 个 新 的 Action 用 来 接收 和 处 理 前 台 传送 过 来 的 参数 ,新 建 一 个 
Java 类 名 为 handleLogin ,并 编辑 内 容 如 下 : 


package mypro; 
import com. opensymphony. xwork2. ActionSupport; 
public class handleLogin extends ActionSupport ( 
private String email; 
private String password ; 
public String execute() throws Exception { 
return SUCCESS; 
} 
public String getEmail() { 
return email; 
} 
public void setEmail(String email) { 
this.email = email; 
} 
public String getPassword () { 
return password ; 
} 
public void setPassword (String password ) { 
this. password = password ; 
} 
} 
Java 几乎 是 完全 面向 对 象 的 语言 ,所 以 在 类 的 外 部 一 般 不 会 直接 去 调用 类 的 内 部 变 
量 , 因 为 这 不 符合 面向 对 象 的 思想 ,通常 会 对 每 个 成 员 变量 定义 相应 的 操作 函数 ,就 是 get 
All set 方 法 ,通过 get 方 法 来 获取 类 的 内 部 成 员 变量 ,通过 set 方法 来 设 定 类 的 内 部 成 员 变 
量 , 这 种 通过 类 方法 操作 变量 的 方法 更 符合 面向 对 象 的 思想 ,利于 程序 的 编写 。 
这 里 介绍 一 个 小 技巧 ,在 编写 复杂 的 类 时 可 能 要 创建 较 多 的 get 和 set 方法 ,这 些 繁 琐 重 
复 的 工作 可 以 直接 让 程序 完成 ,具体 方法 是 定义 好 成 员 变 量 后 右 击 空白 处 , 单 击 Source 
GenerrateGettersandSetters 。 
在 弹出 的 设置 界面 中 色 选 要 定义 get 和 set 方法 的 成 员 变 量 , 然 后 单 击 “ 完 成 "按钮 ,系统 
会 自动 完成 相关 成 员 方 法 的 编写 ,不 仅 十 分 方便 ,还 能 避免 不 必要 的 拼写 错误 ,如 图 3. 3-5 
所 示 。 
在 Struts 的 Action 中 ,会 通过 get 和 set 自动 完成 一 些 参 数 的 接收 和 传递 的 作用 。 当 
用 户 发 送 请 求 到 Action 时 ,Struts2 会 自动 调用 同名 的 set 方法 将 传递 的 参数 赋值 给 类 成 员 
变量 ,在 对 应 Action 的 jsp 模板 页 面 中 ,只 有 定义 了 成 员 变 量 相 应 的 get 函数 , 才 可 以 输出 
相应 的 变量 值 。 
在 创建 完 Action 后 ,还 需要 创建 一 个 jsp 模板 文件 用 来 显示 接收 到 的 数据 。 在 
templets 文件 夹 下 新 建 一 个 文件 名 为 loginResult. jsp ,使 用 Struts2 的 property 标签 输出 接 
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> We email 
> W= password 


回 Alow setters for final fields (remove ‘final’ modifier from fields if necessary) 
Insertion point: 


@ public © protected © package 
final El synchronized 


El Generate method comments 
The format of the getters/setters may be configured on the Code Templates preference page. 


i 4 of 4 selected. 


© murum | rm 


3. 3-5 选择 要 创建 get 和 set 方法 的 成 员 变量 


受到 的 内 容 , 编 辑 内 容 如 下 : 


<% (à taglib prefix- "s" uri = "/struts- tags" +> 
<% (à page language = "java" contentType = "text/html; charset = UTF - 8" 
pageEncoding = "UTF — 8" % > 
<!DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/ TR/htn14/ 
loose. dtd "> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = UTF - 8"> 
<title> 登 录 参 数 显示 </title> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type="text/css"> 
body{ text - align: center; } 
# login- box{width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "login- box"> 
<hl > 用 户 输入 的 参数 为 </hl > 
<ul class = "lee- forn- normal"> 
«li» 
<div class = "lee- input" 
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< label > 邮箱 </label > 
< input type = "text" name = "email" value = "< s:property value = "email" />"> 
</div> 
</li> 
<li> 


<div class = "lee - input"> 

< label > 密码 </label > 

< input type = "text" name = "password " value = "< s: property value = 
"password " />"> 


«/div» 
</li> 
</ul> 
</div> 
</body> 
</html> 


在 struts. xml 中 添加 一 个 新 的 Action: 


<?xml version = "1.0" encoding = "UTF - 8" ?> 
<! DOCTYPE struts PUBLIC 
" - //Rpache Software Foundation//DTD Struts Configuration 3.3//EN" 
"http: //struts. apache. org/dtd s/struts - 3.3. dtd "> 
«struts» 
< constant name = "struts. enable. DynamicMeth odInvocation" value = "false" /> 
< constant name = "struts. devMode" value = "true" /> 
< package name = "default" namespace = "/" extends = "struts - default"> 
< default - action- ref name = "index" /> 
< global- results > 
< result name = "error"»/error. jsp «/result > 
«/global- results > 
< global - exception - mappings > 
< exception - mapping exception = "java. lang. Exception" result = "error"/> 
</global - exception — mappings > 
< action name = "helloWorld" class = "mypro. helloWorld"> 
< result >/templets/helloWorld. jsp</result > 
</action> 
<action name = "login" class = "mypro. login"> 
< result >/templets/login. jsp </result > 
</action> 
<action name = "handleLogin" class = "mypro. handleLogin"> 
< result >/templets/loginResult. jsp</result > 
</action> 
</package > 
</struts> 


现在 登录 和 显示 登录 信息 的 界面 已 经 都 做 好 了 ,还 需要 修改 登录 界面 的 目标 地 址 。 否 
则 ,在 用 户 提 交 登 录 表 单 的 时 候 , 程 序 无 法 知道 向 什么 地 址 提交 数据 ,编辑 Login. jsp 页 面 
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中 的 form 标签 的 Action 属性 ,该 属性 的 作用 是 当 用 户 单 击 “ 提 交 ” 按 钮 时 前 台 会 将 数据 提 
交 到 这 个 地 址 。 编 辑 后 的 代码 如 下 : 


<% @ page language = "java" contentType = "text/html; charset = UTF 一 8" 
pageEncoding = "UTF - 8" % > 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
< head» 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base.css" type = "text/css" rel = "stylesheet"> 
< style type = "text/css"> 
body{text - align: center;] 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "login - box"> 
<hl > 基于 struts2 的 登录 DEMO</h1 > 
< form action = "handleLogin. action" meth od = "post"> 
<ul class = "lee- form - normal"> 
<li> 
<div class = "lee - input"> 
< label > 邮箱 </label > 
< input type = "text" name = "email" value = ""» 
</div> 
</li> 
<li> 
<div class = "lee - input"> 
< label > 密码 </label > 
< input type = "password " name = "password " value = ""> 
</div> 
</li> 
<li> 
< input class = "lee - button" style="width :80px" type = "submit" value = "提交 "> 
</li> 
</ul> 
</form> 
</div> 
</body> 
</html> 


现在 ,所 有 的 工作 都 已 经 完成 了 ,打开 浏览 器 输入 地 址 http://localhost: 8080/mypro/ 
login, 登 录 到 之 前 编写 的 登录 界面 ,输入 邮箱 和 密码 ,然后 提交 表单 ,如 图 3. 3-6 所 示 。 

在 提交 表单 之 后 跳 转 到 登录 参数 显示 的 页 面 ,并 且 显 示 除 了 之 前 输入 的 数据 ,说 明 系统 
已 经 正常 工作 了 ,如 图 3. 3-7 Br. 

上 面 的 案例 中 使 用 的 是 post 方法 提交 数据 ,在 Web 应 用 中 提交 数据 的 方法 主要 有 两 
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QUO :2-:ox|]ec i 


基于 Struts2 的 登录 DEMO 


邮箱 test@testcom 


SIDE) eere 


3.3-6 提交 一 个 登录 表单 


Genee ET -m 


用 户 输入 的 参数 为 


邮箱 test@test.com 


密码 123456 


3.3-7 ”后台 接收 表单 参数 并 显示 出 来 


种 ,分 别 是 get 方法 和 post 方法 ,两 者 的 区 别 在 于 : get 方法 的 参数 是 跟 在 提交 的 URL 地 址 
的 后 面 的 , 它 的 基本 格式 为 : 根 地 址 ? 参数 名 1— 18 18. 参数 名 2 一 值 2, 而 post 方法 则 是 
把 提交 的 数据 放 在 HTTP 包 体 中 。 

在 浏览 器 输入 地 址 http://localhost: 8080/mypro/handleLogin? email = test @ test. 
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com& password 一 123456 ,可 以 看 到 出 现 了 同样 的 显示 结果 ,说 明 email 和 password 参数 
也 被 正确 接受 了 。 
post 方法 和 get 方法 对 比如 表 3. 3-1 所 示 。 


表 3.3-1 post 方法 和 get 方法 对 比 


方法 大 小 限制 安全 性 适用 范围 
post “理论 上 无 大 小 限制 ,但 实际 上 取决 ”高 ”提交 数据 对 服务 器 内 容 进 行 修改 
于 服务 器 配置 
get 最 大 为 1024 字 节 低 通常 用 于 获取 数据 ,也 可 以 用 于 请 求 数据 修改 


本 质 上 来 讲 ,get 是 向 服务 器 发 送 一 个 获取 数据 的 请 求 ,而 post 是 向 服务 器 提交 数据 
(意味 着 可 能 会 改变 服务 器 上 的 数据 ) ,在 实际 应 用 中 可 以 灵活 运用 这 两 种 方法 。 


3.3.6 通过 Session 记录 登录 状态 


在 使 用 一 个 具有 会 员 系 统 的 Web 应 用 时 会 遇 到 登录 状态 保持 的 问题 ,在 Web 应 用 中 ， 
每 个 页 面 都 是 独立 访问 的 ,不 可 能 让 用 户 访问 每 个 页 面前 都 输入 一 次 密码 。 在 GIS 项 目的 
开发 中 同样 会 涉及 用 户 权 限 管 理 的 问题 ,所 以 如 何 实现 用 户 登录 状态 的 保持 也 十 分 重要 。 

实现 用 户 登 录 状 态 保持 的 方法 有 很 多 ,但 本 质 上 都 是 一 样 的 , 即 用 户 登 录 时 在 服务 器 保 
存 一 份 凭证 ,在 用 户 登 录 后 访问 其 他 页 面 时 通过 检验 是 否 存 在 合法 凭证 来 判断 用 户 是 否 有 
访问 该 页 面 的 权限 。 在 用 户 注 销 登 录 后 系统 再 将 该 凭证 作废 或 者 删除 。 

在 计算 机 系统 中 既然 要 保存 凭证 ,必然 会 涉及 数据 的 存储 ,所 以 理论 上 只 要 能 将 用 户 凭 
证 的 数据 保存 下 来 ,就 可 以 实现 用 户 登录 的 保持 ,比如 保存 登录 信息 到 文件 系统 数据库 其 
至 是 内 存 等 。 

下 面 讲解 如 何 通过 Session 实现 用 户 登录 的 保持 ,Session 是 一 种 用 来 解决 客户 端 和 服 
务 器 会 话 保持 的 方法 , 它 是 一 个 通用 的 概念 ,而 非 Java 特有 的 ,但 用 于 Web 开发 的 语言 或 
者 框架 都 会 提供 相应 实现 Session 的 工具 方便 开发 者 来 实现 对 会 话 的 控制 。 现 在 来 尝试 使 
用 Session 进行 登录 状态 的 保持 ,过 程 其 实 非常 简单 ,只 需要 在 之 前 编写 处 理 登 录 的 
handleLogin 类 里 添加 记录 Session 的 程序 就 可 以 了 。 打 开 handleLogin 这 个 类 ,进一步 编 
辑 。 在 这 一 个 类 中 实现 登录 和 注销 两 种 操作 ,这 样 可 以 省 去 再 次 创建 一 个 新 的 类 的 麻烦 。 
每 个 Action 里 面 都 默认 调用 execute() 这 一 方法 ,所 以 要 做 到 实现 多 功能 ,通过 客户 端 发 送 
不 同 的 参数 就 可 以 实现 了 。 现 在 为 客户 端 增 加 一 个 名 为 type 参数 ,用 来 表示 用 户 的 操作 是 
登录 还 是 注销 登录 , 当 type 的 值 为 login 时 执行 登录 的 操作 ,为 unlogin 时 执行 注销 登录 的 
操作 。 

package mypro; 

import java.util.Map; 

import com. opensymphony. xwork2. ActionContext; 


import com. opensymphony. xwork2. ActionSupport; 
public class handleLogin extends ActionSupport { 
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private String email; 
private String password ; 
private String type; 
public String execute() throws Exception { 
if(type. equals("login"))( 
Map session = ActionContext. getContext().getSession(); 
session. put("email", email); 
session. put("password ", password ) ; 
return "login"; 
} 
if(type. equals("unlogin" ) ) { 
Map session = ActionContext. getContext().getSession(); 
session. remove("email") ; 
session. remove("password ") ; 
return "unlogin"; 
} 
return "wrong"; 
} 
public String getType() { 
return type; 
} 
public void setType(String type) { 
this. type = type; 
} 
public String getEmail() { 
return email; 
} 
public void setEmail(String email) { 
this.email = email; 
} 
public String getPassword () { 
return password ; 
} 
public void setPassword (String password ) { 
this. password = password ; 
} 
} 


该 文件 中 通过 Map session = ActionContext. getContext(). getSession() ;获取 session 
的 map 对 象 ,然后 对 其 进行 Session 的 修改 操作 ,操作 方法 和 操作 普通 的 map 对 象 没 有 什 
么 区 别 。 通 过 put 方法 写 人 了 两 个 属性 ,分 别 为 email 和 password, 它 们 的 值 为 前 台 传送 过 
来 的 参数 。 通 过 remove 方法 移 除 这 两 个 值 。 如 果 前 台 没有 传送 type 这 个 参数 , 则 视 为 非 
法 的 方法 。 

这 里 的 return 的 字符 串 为 自 定义 字符 串 , 你 可 以 根据 需要 取 相 应 的 名 字 , 它 们 在 写 
strtus. xml 配置 文件 的 时 候 会 用 到 ,现在 开始 编辑 该 文件 。 修 改 原来 添加 的 handleLogin 
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的 Action。 


<action name = "handleLogin" class = "mypro. handleLogin"> 


<result name = "login">/templets/loginResult. jsp</result > 


« result name = "unlogin">/templets/unlogin. jsp</result > 


< result name = "wrong">/templets/wrong. jsp </result > 


</action> 


Result 标签 中 可 以 通过 指定 不 同 的 name 值 实 现在 Action 执行 完成 后 跳 转 到 不 同 的 模 
板 页 面 。 继 续 创 建 相 应 的 模板 页 面 ,在 templets 文件 下 添加 一 个 新 的 文件 unlogin. jsp 作为 
注销 成 功 后 的 页 面 ,编辑 内 容 如 下 : 


<% @ page language = "java" contentType = "text/html; charset = UTF — 8" 
pageEncoding = "UTF - 8" % > 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htn14/ 
loose. dtd "> 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
< style type="text/css"> 
body{ text - align: center; } 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "login - box"> 
<hl > 注销 成 功 !</hl > 
</div> 
</body> 
</html> 


然后 再 新 建 一 个 文件 名 为 wrong. jsp, 作 为 缺少 参数 非法 访问 后 的 提示 页 面 。 


<% @ page language = "java" contentType = "text/html; charset = UTF - 8" 
pageEncoding = "UTF - 8" % > 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
< head» 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
< style type = "text/css"» 
body{text - align: center; } 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
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<div id= "login- box"> 
< hl > 缺少 参数 !</hl > 
«/div» 
</body > 
</html> 


最 后 编辑 之 前 编写 的 登录 界面 的 模板 ,并 在 里 面 添加 一 个 type 参数 。 


<% @ page language = "java" contentType = "text/html; charset = UTF - 8" 
pageEncoding = "UTF - 8" %> 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
< head» 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
< style type="text/css"> 
body(text - align: center;] 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "login - box"> 
<hl > 基于 struts2 的 登录 DEMO «/h1 > 
< form action = "handleLogin. action" meth od = "post"> 
< input type = "hidden" name = "type" value = "login"> 
<ul class = "lee - form - normal"> 
«li» 


<div class = "lee - input"> 


< label > 邮箱 </label > 
< input type = "text" name = "email" value = ""> 
</div> 
</li> 
<li> 


<div class = "lee- input"> 


< label > 密码 </label > 
< input type = "password " name = "password " value = ""» 
</div> 
</li> 
<li> 
< input class = "lee - button" style= "width :80px" type = "submit" value = "提交 "> 
</li> 
</ul> 
</form> 
</div> 
</body> 


</html> 
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其 中 添加 了 一 个 类 型 为 hidden 的 input 标签 ,并 将 value 赋值 为 login, 很 多 时 候 程序 需要 
传送 数据 参数 ,但 又 不 希望 用 户 看 到 这 个 参数 的 时 候 就 使 用 该 标签 , 当 用 户 提交 表单 的 
时 候 系 统 会 将 该 参数 作为 参数 之 一 传送 到 后 台 ,而 用 户 在 编辑 信息 的 时 候 并 不 会 看 到 这 
个 参数 。 

以 上 步骤 全 部 完成 后 重启 服务 器 ,输入 地 址 http://localhost: 8080/mypro/login. 
action 访问 ,看 能 否 正常 工作 。 可 能 读者 会 感到 奇怪 ,执行 效果 和 之 前 并 没有 什么 区 别 , 到 
目前 为 止 执行 效果 确实 不 会 有 什么 区 别 , 因 为 程序 只 做 了 登录 信息 的 录入 工作 ,并 没有 进行 
权限 控制 的 操作 , 接 下 来 继续 了 解 如 何 通过 已 经 录入 的 Session 信息 来 实现 页 面 的 权限 访 
问 控制 。 


3.3.7 使 用 拦截 器 阻止 非法 访问 


前 面 已 经 将 用 户 的 访问 凭证 进行 了 记录 ,那么 实现 权限 的 控制 就 不 是 什么 难事 了 ,最 直 
接 的 办 法 是 在 每 个 Action 中 添加 Session 信息 的 查询 验证 ,并 根据 验证 结果 跳 转 到 不 同 的 
页 面 ,但 在 实际 应 用 中 这 么 做 可 能 会 造成 大 量 的 重复 工作 ,并 会 给 以 后 的 维护 带 来 不 必要 的 
麻烦 ,在 Struts2 框架 中 提供 了 一 套 拦截 器 机 制 , 通 过 拦截 器 可 以 很 方便 地 对 各 种 页 面 的 访 
问 进行 权限 的 控制 ,其 工作 原理 如 图 3. 7-8 Bron 。 


Servlet Filter Dispatcher 


Interceptor 


Action 


Result 


3.3-8 拦截 器 工作 原理 图 


在 Struts2 介绍 中 已 经 知道 了 在 访问 Action 之 前 首先 会 经 过 拦截 器 。 形 象 地 说 ,拦截 
器 相当 于 一 个 引路 人 ,可 以 控制 访问 究竟 去 执行 哪 一 个 Actions 同样 ,Action 本 身 也 可 以 执 
行 相同 的 作用 ,通过 返回 不 同 的 值 跳 转 到 不 同 的 JSP 模板 页 面 。 
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创建 一 个 拦截 器 有 如 下 步骤 : 

(1) 自 定 义 一 个 实现 Interceptor 的 接口 (或 者 继承 自 AbstractInterceptor) 的 类 。 

(2) 在 struts. xml 中 注册 上 一 步 中 定义 的 拦截 器 。 

(3) 在 需要 使 用 的 Action 中 引用 上 述 定义 的 拦截 器 ,为 了 方便 也 可 将 拦截 器 定义 为 默 
认 的 拦截 器 ,这 样 在 不 加 特殊 声明 的 情况 下 所 有 的 Action 都 被 这 个 拦截 器 拦截 。 

public interfaceInterceptor extends Serializable { 

void destroy(); 
void init(); 
String intercept(ActionInvocationinvocation) throwsException; 

) 

Interceptor 接口 声明 了 三 个 方法 : 

C) Init 方法 : Init 方法 在 拦截 器 类 创建 之 后 ,在 对 Action 镜像 拦截 之 前 调用 ,相当 于 
一 个 post-constructor 方法 ,使 用 这 个 方法 可 以 给 拦截 器 类 做 必要 的 初始 化 操作 o 

(2) Destory 方法 : Destroy 方法 在 拦截 器 被 垃圾 回收 之 前 调用 ,用 来 回收 init 方法 初 
始 化 的 资源 。 

(3) Intercept 方法 : Intercept 方法 是 拦截 器 的 主要 拦截 方法 ,如 果 需 要 调用 后 续 的 
Action 或 者 拦截 器 ,只 需要 在 该 方法 中 调用 invocation, invoke( ) 方 法 即 可 ,在 该 方法 调用 的 
前 后 可 以 插入 Action 调用 前 后 拦截 器 需要 做 的 方法 。 如 果 不 需要 调用 后 续 的 方法 , 则 返回 
一 个 String 类 型 的 对 象 即 可 ,例如 Action. SUCCESS。 

在 login 类 的 同 级 目录 , 即 mypro 包 下 新 建 一 个 拦截 器 类 ,名 为 loginInterceptor, 要 注 
意 的 是 拦截 器 的 命名 必须 为 自 定义 名 十 Interceptor, 并 且 必 须 和 所 作用 的 Action 在 同一 级 
目录 ,编辑 这 个 类 的 内 容 如 下 : 

package mypro; 

import java. util. Map; 

import com. opensymphony. xwork2. ActionContext; 

import com. opensymphony. xwork2. ActionInvocation; 

import com. opensymphony. xwork2. interceptor. AbstractInterceptor; 


public class loginInterceptor extends AbstractInterceptor{ 
public String intercept(ActionInvocation actionInvocation) throws Exception 


{ 
Map session = actionInvocation. getInvocationContext().getSession(); 
if(null == session. get("email")) { 

return "unlogin"; 
} 


return actionInvocation. invoke() ; 
) 
H 
在 这 个 拦截 器 类 中 ,实现 了 查询 Session 中 是 否 存在 email 变量 ,如 果 不 存在 则 返回 字 
符 串 unlogin, 否则 返回 actionInvocation. invoke() 继 续 执行 相应 的 Action。 继 续 编辑 
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struts, xml 配置 拦截 器 。 


<?xml version = "1.0" encoding = "UTF - 8" ?> 
<! DOCTYPE struts PUBLIC 
" - //Rpache Software Foundation//DTD Struts Configuration 2.3//EN" 
"http: //struts. apache. org/dtd s/struts - 2.3. dtd "> 
«struts» 
< constant name = "struts. enable. DynamicMeth odInvocation" value = "false" /> 
< constant name = "struts.devMode" value = "true" /> 
< package name = "default" namespace = "/" extends = "struts - default"> 
< interceptors > 
< interceptor name = "loginCheck" class = "myPro. loginInterceptor"> 
</interceptor > 
< interceptor - stack name = "myStack"> 
< interceptor - ref name = "loginCheck"/> 
< interceptor - ref name = "defaultStack"/> 
«/interceptor - stack > 
</interceptors > 
< default - interceptor - ref name = "myStack"></default - interceptor - ref > 
< global - results > 
< result name = "unlogin">/templets/login. jsp</result > 
< result name = "error">/error. jsp</result > 
«/global- results > 
< global - exception - mappings > 
< exception - mapping exception = "java. lang. Exception" result = "error"/> 
«/global- exception - mappings > 
< action name = "helloWorld" class = "mypro. helloWorld"> 
< result »/tenplets/helloWorld. jsp «/result > 
</action > 
< action name = "login" class = "mypro. login"> 
< result >/templets/login. jsp </result > 
</action > 
< action name = "handleLogin" class = "mypro. handleLogin"> 
< result name = "login">/templets/loginResult. jsp </result > 


< result name = "unlogin">/templets/unlogin. jsp </result > 


< result name = "wrong"»/tenplets/wrong. jsp </result > 
</action> 


</package > 

</struts > 

AP <interceptors> E A —4- P: aR AE oli it global-results 定义 了 当 身 份 验证 失败 
时 返回 的 JSP 页 面 , 当 身份 验证 失败 时 将 重新 跳 转 到 登录 界面 要 求 重新 登录 。 为 了 更 好 地 
演示 权限 控制 ,再 新 建 一 个 页 面 作为 用 户 的 主页 ,在 templets 下 新 建 一 个 名 为 home. jsp 的 
页 面 ,编辑 内 容 如 下 : 


<% @ page language = "java" contentType = "text/html; charset = UTF — 8" 
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pageEncoding = "UTF - 8" %> 
<!DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type="text/css"> 
body(text - align: center; } 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
< div class = "lee - container"> 
< hl > 用 户 管理 页 面 < a href = "mypro/handleLogin. action? type = unlogin">【 注 销 登 录 】 
</a></hl > 
<table class = "lee - table lee - table - strip lee- table - th color"> 
<tr> 
«th» ID</th> 
<th> 用 户 邮箱 </th> 
<th> 密 码 </th> 
</tr> 
<tr> 
<td>1</td> 
<td >3k — @test. com </td> 
<td> 123456 </td> 


</tr> 
<tr> 
<td>2</td> 
<td> 李 四 @test. com </td> 
<td>123456 </td> 
</tr> 
<tr> 
<td>3</td> 
<td> 小 王 @test. com</td> 
<td>123456 </td> 
</tr> 
</table> 
</div> 
</body> 
</html > 


在 这 个 文件 中 创建 了 一 张 表格 ,然后 使 用 这 个 表格 显示 用 户 的 数据 ,现在 仅 放 入 一 些 测 


试 数据 进行 演示 。 需 要 注意 ,该 文件 中 通过 一 个 a 标签 增加 了 注销 登录 的 功能 ,本 质 上 则 是 
通过 GET 请 求实 现 的 。 现 在 继续 为 这 个 模板 页 面 创建 一 个 名 为 home 的 action 类 ,编辑 内 
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容 如 下 : 


package mypro; 
import com. opensymphony. xwork2. ActionSupport; 
public class home extends ActionSupport ( 
public String execute() throws Exception { 
return SUCCESS; 
H 
} 


继续 配置 struts. xml 文件 使 得 这 个 action 可 以 运行 ,在 其 中 添加 一 个 新 的 action. 


< action name = "home" class = "nypro. home"> 
< result >/templets/home. jsp</result > 
< interceptor - ref name = "defaultStack" /> 
< interceptor - ref name = "loginCheck" /> 
</action > 
现在 在 浏览 器 中 输入 地 址 http://localhost ; 8080/mypro/home. action, 3X 4 9t mi AIK 
显示 的 是 新 建 的 用 户 管理 表单 页 面 ,但 是 现在 却 跳 转 到 了 登录 页 面 , 说 明 拦 截 器 已 经 开始 工 
作 了 。 
输入 任意 的 用 户 和 密码 登录 ,如 图 3. 3-9 所 示 。 
CIE nprocathost ss0/mypro/momeacion B P= Bé x] ees x Co 


基于 Struts2 的 登录 DEMO 


部 箱 test@test.com 


mj eeeece 


3.3-9 输入 登录 信息 


显示 登录 信息 说 明 登 录 已 经 成 功 , 程 序 也 已 经 将 用 户 的 输入 信息 写 入 Session, 如 图 3. 3-10 
所 示 。 
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G (| http://localhost:8080/mypro/handleLogin.action 8 P ~ BOX DIT REED 


图 3.3-10 登录 信息 注册 成 功 


现在 再 次 输入 home 的 地 址 http://localhost:8080/mypro/home. action 来 看 看 能 否 访 
fa] ,现在 访问 home. action, 已 经 可 以 访问 用 户 管理 界面 了 ,说 明 配 置 的 拦截 器 已 经 可 以 进 
行 权限 的 管理 了 。 现 在 单 击 注销 登录 ,如 图 3. 3-11 所 示 。 


bab | hep/ iocalhost a080/mypro/mypro/handlelogr B O~ BEX||Blocahor > 出 


注销 成 功 ! 


3.3-11 注销 登录 信息 


已 经 注销 成 功 ,说 明 程序 已 经 将 之 前 输入 的 用 户 信 息 从 Session 中 删除 ,如 果 用 户 再 次 
访问 home 页 面 ,又 会 再 次 跳 转 到 登录 页 面 提示 用 户 重 新 登录 。 到 此 为 止 已 经 基本 实现 了 
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用 户 的 登录 状态 保持 和 基本 的 页 面 权限 控制 问题 ,当然 这 只 是 一 个 十 分 基本 的 实现 ,实际 工 
程 中 的 管理 系统 还 有 很 多 工作 要 做 ,比如 用 户 信息 的 校 验 . 针 对 不 同 的 用 户 进行 不 同 级 别 的 
权限 管理 ,这 些 功 能 都 需要 用 到 数据 库 的 知识 ,在 学 习 完 数据 库 的 基本 使 用 后 会 继续 完善 这 
个 系统 。Struts2 提供 的 不 同 拦截 器 说 明 如 表 3. 3-2 所 示 。 


表 3.3-2 Struts? 提供 的 不 同 拦截 器 功能 说 明 表 


拦 截 器 A 学 说 9 
在 不 同 请 求 之 间 ,将 请 求 参数 在 不 同名 字 间 转换 ,请 求 
AliasInterceptor alias 
内 容 不 变 
让 前 一 个 Action 的 属性 可 以 被 后 一 个 Action 访问 , 38 
ChainingInterceptor chain 在 和 chain 类 型 的 result(<resulttype= "chain" >) 2 & 
使 用 
添加 了 checkbox 自动 处 理 代码 ,将 没有 选中 的 
CheckboxInterceptor checkbox checkbox 的 内 容 设 定 为 false, 而 html 默认 情况 下 不 提 
交 没 有 选中 的 checkbox 
CookiesInterceptor cookies 使 用 配置 的 name, value 是 指 cookies 


ConversionErrorInterceptor 


conversionError 


将 错误 从 ActionContext 中 添加 到 Action 的 属性 字段 中 


CreateSessionInterceptor 


createSession 


自动 创建 HttpSession, 用 来 为 需要 使 用 到 HttpSession 
的 拦截 器 服务 


DebuggingInterceptor debugging 提供 不 同调 试用 的 页 面 来 展现 内 部 数据 状况 
台 执 行 i i = 

ExecuteandWaitInterceptor | execAndWait ds Pi Aca IE REC CAPS RU e 
ExceptionInterceptor exception 将 异常 定位 到 一 个 画面 
FileUploadInterceptor fileUpload 提供 文件 上 传 功能 
118nInterceptor il8n 记录 用 户 选择 的 locale 
LoggerInterceptor logger 输出 Action 的 名 字 

存储 或 者 访问 实现 ValidationAware 接口 的 Action 类 出 
MessageStoreInterceptor |store 


现 的 消息 错误 .字段 错误 等 


ModelDrivenInterceptor 


model-driven 


如 果 一 个 类 实现 了 ModelDriven, # getModel 得 到 的 结 
果 放 在 ValueStack 中 


如 果 一 个 Action 实现 了 ScopedModelDriven, 则 这 个 拦 


ScopedModelDriven scoped-model-driven| 截 器 会 从 相应 的 Scope 中 取出 model 调用 Action 的 
setModel 方法 将 其 放 入 Action 内 部 

ParametersInterceptor params 将 请 求 中 的 参数 设置 到 Action 中 去 

EE NIIE retat 如 果 Acton 实现 了 Preparable, 则 该 拦截 器 调用 Action 
类 的 prepare 方法 

Scopelnterceptor scope 将 Action 状态 存 人 session 和 application 的 简单 方法 


ServletConfigInterceptor 


servletConfig 


提供 访问 HttpServletRequest 和 HttpServletResponse 
的 方法 ,以 Map 的 方式 访问 


Static ParametersInterceptor 


Static Params 


从 struts. xml X fft P H < action > rf ff] < param rf fff 
内 容 设 置 到 对 应 的 Action 中 
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Ej 
拦 截 器 A F 说 明 
RolesInterceptor roles 确定 用 户 是 否 具有 JAAS 指定 的 Role, 否 则 不 予 执行 
TimerlInterceptor timer 输出 Action 执行 的 时 间 
TokenInterceptor token 通过 Token 来 避免 双击 
TokenSessionInterceptor —|tokenSession 和 TokenInterceptor 一 样 , 不 过 双击 的 时 候 把 请 求 的 数 
据 存 储 在 Session 中 
CRA T 使 用 action-validation. xml 文件 中 定义 的 内 容 校 验 提 交 
ValidationInterceptor validation 
的 数据 
WorkflowInterceptor workflow 调用 Action 的 validate 方法 ,一 旦 有 错误 就 返回 ,重新 
定位 到 INPUT 画面 
ParameterFilterInterceptor |N/A 从 参数 列表 中 删除 不 必要 的 参数 
ProfilingInterceptor profiling 通过 参数 激活 profile 


3.3.8 文件 的 上 传 


在 任何 一 个 基本 的 系统 中 都 不 免 会 遇 到 文件 上 传 的 问题 ,比如 在 GIS 项 目 中 大 量 的 数 
据 不 可 能 通过 手工 输入 完成 ,而 是 通过 数据 文件 上 传 , 通 过 程序 导入 到 数据 库 。 本 节 将 继续 
讲解 如 何 使 用 Struts2 来 实现 图 片 文件 的 上 传 ,在 这 个 例子 中 将 实现 上 传 一 张 图 片 到 后 台 
并 且 显 示 出 来 。 

我 们 先 来 分 析 一 下 该 如 何 实现 这 个 功能 ,上 传 部 分 自然 是 需要 一 个 上 传 的 动作 类 和 一 
个 视图 页 面 , 上 传 成 功 后 还 需要 一 个 用 于 显示 图 片 的 视图 页 面 。 实 际 开发 中 通常 会 将 业务 
的 处 理工 作 从 action 动作 类 中 分 离 出 来 ,但 为 了 方便 ,在 该 例子 中 将 在 action 中 实现 上 传 的 
功能 。 

上 传 文件 的 原理 是 使 用 POST 数据 提交 ,将 文件 数据 流 发 送 到 服务 器 端 ,服务 器 将 该 
文件 保存 到 指定 的 路 径 下 ,同时 将 路 径 地 址 返回 给 预览 页 面 。 

现在 新 建 一 个 类 ,命名 为 HandleUploadFile, 这 个 类 用 来 接收 上 传 的 文件 并 保存 到 指 
定 文件 夹 ,编辑 内 容 如 下 : 


package mypro; 

import java. io. File; 

import org. apache. commons. io. FileUtils; 

import org. apache. struts2. ServletActionContext; 
import com. opensymphony. xwork2. ActionContext; 
import com. opensymphony. xwork2. ActionSupport; 
public class HandleUploadFile extends ActionSupport{ 


private File image; // 上 传 的 文件 
private String imageFileName; // 文 件 名 称 
private String imageContentType; // 文 件 类 型 
private String filePath ; // 文 件 保存 的 路 径 


public String execute() throws Exception { 
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String realpath = ServletActionContext. getServletContext().getRealPath ("/uploads"); 
System. out. println("realpath : " * realpath ); 
if (image != null) ( 
File savefile - new File(new File(realpath ), imageFileName); 
if (!savefile.getParentFile().exists()) 
savefile. getParentFile().mkdirs(); 
FileUtils.copyFile(image, savefile); 
ActionContext.getContext().put("message", "文件 上 传 成 功 "); 
filePath = "uploads/" + imageFileName; 
} 
return "success"; 
} 
public String getFilePath () { 
return filePath ; 
} 
public void setFilePath (String filePath ) { 
this. filePath = filePath ; 
} 
public File getImage() { 
return image; 
} 
public void setImage(File image) { 
this. image = image; 
} 
public String getImageFileName() { 
return imageFileName; 
} 
public void setImageFileName(String imageFileName) { 
this. imageFileName = imageFileName; 
} 
public String getImageContentType() { 
return imageContentType; 
} 
public void setImageContentType(String imageContentType) { 
this. imageContentType = imageContentType; 
} 
} 


在 上 传 的 action 类 中 ,一 般 至 少 要 定义 三 个 变量 用 于 接收 前 台 的 参数 : 首先 是 File 
类 型 的 成 员 变 量 , 它 用 于 接收 前 台 传 输 的 文件 ,可 以 任意 命名 ; 其 次 分 别 是 两 个 String 类 
型 的 变量 ,用 于 接收 文件 的 名 称 和 类 型 ,它们 的 命名 必须 和 接收 文件 的 参数 名 保持 统一 ， 
这 个 文件 中 将 File 命名 为 image, 所 以 其 他 两 个 参数 分 别 命名 为 imageFileName 和 
imageContentType。 

通过 ServletActionContext. getServletContext(). getRealPath ("/uploads") 可 以 获取 
网 站 应 用 运行 的 实际 路 径 ,uploads 是 定义 的 放置 上 传 文件 的 目录 ,需要 在 WebContent 下 
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新 建 这 个 文件 夹 。 
通过 FileUtils. copyFile(image，savefile) 方 法 可 以 很 方便 地 保存 文件 。 再 新 建 一 个 
action 类 来 显示 上 传 页 面 ,命名 为 uploadFile, 编 辑 内 容 如 下 : 


package mypro; 
import com. opensymphony. xwork2. ActionContext; 
import com. opensymphony. xwork2. ActionSupport; public class UploadFile extends ActionSupport( 
public String execute() throws Exception ( 
return "success"; 
} 
} 


同时 再 创建 一 个 上 传 的 模板 页 面 ,命名 为 uploadFile. jsp, 并 编辑 内 容 如 下 : 


<% @ page language = "java" contentType = "text/html; charset = UTF - 8" 
pageEncoding = "UTF - 8" %> 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
<head> 
«title»X ff f&</title> 
<meta http - equiv = "pragma" content = "no - cache"> 
<meta http - equiv = "cache - control" content = "no - cache"> 
<meta http - equiv = "expires" content = "0"> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type = "text/css"> 
body{ text - align: center; } 
# upload(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "upload"> 
< form action = "uploadFile.action" enctype = "multipart/form- data" meth od = "post"> 
< label > 选择 文件 : </label >< input type = "file" name = "image"> 
< input type = "submit" value = " f£" /> 
</form> 
<br/> 
<s:fielderror /> 
</div> 
</body > 


除了 上 传 的 模板 页 面 ,还 需要 新 建 一 个 页 面 用 于 上 传 后 文件 的 显示 ,新 建文 件 
displayUpload. jsp ,需要 注意 ,在 这 个 文件 中 form 的 action 属性 要 填写 定义 的 处 理 图 片上 
传 的 action 类 地 址 handleUploadFile. action ,同时 选择 图 片 的 input 标签 的 name 属性 必须 
和 后 台 接收 的 参数 名 一 致 .这 是 因为 在 handleUploadFile 中 接收 图 片 的 成 员 变量 名 为 
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image, 所 以 这 里 的 name 属性 必须 设置 为 image 才能 保证 数据 接收 ,全 部 文件 内 容 编 辑 内 
ST: 


<% @ page language = "java" contentType = "text/html; charset = UTF - 8" 
pageEncoding = "UTF - 8" > 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
<head> 
<title> X ff E f&</title> 
<meta http - equiv = "pragma" content = "no - cache"> 
<meta http - equiv = "cache - control" content = "no - cache"> 
<meta http - equiv = "expires" content = "0"> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type="text/css"> 
body{ text - align: center; } 
# upload{width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
<div id= "upload"> 
< hl > 上 传 文件 DEMO </hl > 
< form action = "handleUploadFile.action" enctype = "multipart/form - data" meth od = "post"> 
<ul class = "lee - form - normal"> 


«li» 
< input class = "" type= "file" name = "image" value = "选择 文件 "> 
</li> 
<li> 
< input class = "lee - button" type = "submit" value = "确定 "> 
</li> 
</ul> 
</form> 
<br/> 
< s:fielderror /> 
</div> 
</body> 
</html> 


再 创建 一 个 displayFile. jsp 文件 用 于 上 传 图 片 的 显示 ,在 该 文件 中 通过 struts2 提供 的 
property 标签 输出 handleUploadFile 类 中 的 filePath 变量 来 显示 图 片 . 文 件 完整 内 容 编 辑 
如 下 : 

<% @ taglib prefix- "s" uri = "/struts - tags" %> 


<% @ page language = "java" contentType = "text/html; charset = UTF — 8" 
pageEncoding = "UTF — 8" % > 
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<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
<head> 
<title > 文件 上 传 </title> 
<meta http - equiv = "pragma" content = "no - cache"> 
<meta http - equiv = "cache - control" content = "no - cache" 
<meta http - equiv = "expires" content = "0"> 
<meta charset = "utf - 8"> 

< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 

<style type="text/css"> 

body{ text - align: center; } 
# upload(width :500px;margin:0 auto;margin- top: 100px; } 

</style> 
</head> 
< body> 

< div id= "upload"> 
<hl > 文件 的 相对 路 径 为 : < s:property value = "filePath " /></hl > 
< ing src = "< s:property value = "filePath " />" width = "300px;" border = "0"/> 

</div> 
</body> 
</html> 


继续 修改 struts. xml 配置 文件 ,添加 两 个 新 的 action, 分 别 是 handleUploadFile 和 
uploadFile, 需 要 注意 ,这 里 没有 对 图 片上 传 失 败 作 返 回 处 理 , 实 际 应 用 中 还 应 该 对 图 片上 传 
的 异常 做 相应 的 返回 处 理 , 当 上 传 处 理 完 成 时 会 将 图 片 的 相对 路 径 传送 到 display Upload. 
jsp 中 用 于 图 片 显 示 。 

«action name = "uploadFile" class = "mypro. UploadFile"> 

< result name = " success">/templets/uploadFile. jsp </result> 
</action> 

< action name = "handleUploadFile" class = "mypro. HandleUploadFile"> 

< result name = " success" »/tenplets/displayUpload. jsp </result > 

</action> 

现在 打开 浏览 器 ,输入 地 址 http: //localhost: 8080/mypr/uploadFile. action ,可 以 看 到 
以 下 界面 ,选择 一 张 图 片上 传 , 如 图 3. 3-12 所 示 。 

如 果 可 以 看 到 上 传 的 图 片 能 够 正常 显示 出 来 ,说 明 上 传 功能 已 经 可 以 正常 工作 了 ,如 
图 3.3-13 所 示 。 

在 实际 项 目 , 比 如 在 GIS 的 项 目 中 ,不 可 避免 会 遇 到 上 传 文件 的 需求 ,比如 某 个 地 图 要 
素 的 图 片上 传 ,或 者 一 些 附 件 文件 的 上 传 等 ,以 上 案例 仅仅 实现 了 图 片 的 上 传 和 保存 ,还 不 
能 满足 实际 项 目的 需求 ,在 实际 应 用 中 还 需要 将 文件 保存 的 路 径 放 置 到 关系 型 数据 库 中 以 
便 今后 查找 ,上 面 的 例子 中 虽然 可 以 在 上 传 后 将 文件 正确 显示 出 来 ,但 是 今后 查找 却 面临 困 
难 , 因 为 靠 人 记忆 路 径 去 查看 文件 是 不 切实 际 的 。 
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图 3. 3-12 上传 文件 界面 
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图 3.3-13 成 功 上 传 后 显示 所 上 传 的 图 片 


到 这 里 ,关于 struts2 的 基本 使 用 就 基本 介绍 完了 ,后面 的 章节 会 学 习 数据 库 开发 的 基 
础 知识 。 
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3.4 Hibernate 框架 的 使 用 


3.4.1 配置 数据 库 连 接 


在 使 用 Hibernate 之 前 ,必须 知道 Hibernate 是 一 个 持久 化 框架 , 它 用 于 承担 一 些 数据 
库 的 通用 操作 ,可 以 将 开发 者 从 数据 库 的 底层 操作 解放 出 来 ,但 归根 结 底数 据 库 的 连接 方式 
是 一 样 的 ,通常 都 会 通过 JDBC 来 连接 数据 库 。 什 么 是 JDBC WE? JDBC 的 全 称 为 Java 
Data Base Connectivity, 它 是 一 种 执行 SQL 语句 的 Java API, 所 以 不 论 是 直接 对 数据 库 进 
行 底层 操作 ,还 是 通过 数据 库 框 架 来 实现 数据 库 的 编程 ,其 实 都 是 通过 JDBC 接口 来 实 
现 的 。 

既然 如 此 ,在 使 用 Hibernate 之 前 就 要 下 载 JDBC, 它 是 进行 数据 库 编 程 的 基石 。 进 入 
postgresql 的 官方 网 站 下 载 JDBC。 地 址 是 http: //jdbc. postgresql. org/download. html, 

下 载 到 的 文件 中 可 能 包含 很 多 文件 ,我 们 只 需要 将 其 中 的 jar 文件 复制 到 工程 
WebContent/WEB-INFO/lib 下 就 可 以 使 用 了 。 

在 继续 编写 程序 之 前 , 先 在 数据 库 中 建立 一 张 记录 用 户 数 据 的 表 , 结 构 如 表 3. 3-3 


所 示 。 
表 3.3-3 表 的 结构 
字 段 名 数据 类 型 作 用 
Id 整形 主键 
Email 字符 串 保存 邮箱 
Password 字符 串 保存 密码 


这 里 只 记录 了 之 前 案例 中 用 户 登录 输入 的 信息 ,没有 增加 其 他 信息 ,而 在 实际 工程 中 数 
据 量 肯定 会 多 很 多 ,但 操作 的 原理 基本 是 一 样 的 。 这 里 的 数据 类 型 采用 中 文 标示 ,原因 是 不 
同 的 数据 库 中 相同 的 数据 类 型 命名 会 有 所 不 同 ,在 GIS 开发 项 目 中 可 以 选择 很 多 数据 库 ， 
比如 Oracle、MySQL 等 。GIS 开发 项 目 较 其 他 项 目 不 同 的 一 点 是 数据 库 会 涉及 空间 数据 的 
保存 ,这 点 需要 注意 。 

在 下 载 完 JDBC 后 ,还 需要 下 载 Hibernate, 进 入 官方 网 站 http://hibernate. org/ ,下载 
HibernateORM。 解 压 下 载 的 压缩 包 后 会 看 到 以 下 的 目录 结构 : Lib 文件 夹 里 包含 了 开发 
程序 需要 用 的 Java 包 , 打 开 Lib 文件 夹 ,里 面 会 有 很 多 子 文件 夹 , 将 required 文件 夹 中 的 文 
件 复制 到 工程 中 的 WEB-INF/lib 文件 夹 下 。 最 后 ,在 Eclipse 中 刷新 工程 以 便 让 工程 识别 
到 新 添加 的 包 。 现 在 ,最 基本 的 工作 已 经 完成 了 。 


3.4.2 建立 持久 化 类 


前 面 已 经 介绍 了 持久 化 的 概念 ,持久 化 的 作用 是 将 对 数据 库 的 操作 抽象 为 对 类 的 操作 ， 
这 种 对 数据 的 操作 方式 更 加 符合 编程 思路 和 习惯 ,所 以 创建 相关 的 类 必 不 可 少 。 接 下 来 创 
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建 一 个 持久 化 类 ,可 以 这 么 理解 : 一 个 持久 化 类 对 应 着 数据 库 中 的 一 个 表 , 程 序 对 这 个 类 实 
例 化 就 相当 于 对 应 数据 表 中 的 一 条 记录 ,对 该 实例 操作 的 同时 Hibernate 就 会 相应 地 对 数 
据 库 进行 操作 。 

现在 新 建 一 个 user 类 ,编辑 内 容 如 下 : 


package mypro; 
public class user ( 
private int id; 
private String email; 
private String password ; 
public int getId() { 
return id; 
} 
public void setId(int id) { 
this. id = id; 
} 
public String getEmail() { 
return email; 
} 
public void setEmail(String email) { 
this.email = email; 
} 
public String getPassword () { 
return password ; 
} 
public void setPassword (String password ) { 
this. password = password ; 
} 
} 


可 以 看 到 ,建立 持久 化 其 实 非常 简单 ,只 要 定义 类 的 成 员 变量 一 一 对 应 数据 库 中 的 字 
段 ,并 设置 好 对 应 的 get 和 set 方法 即 可 。 需 要 注意 ,类 中 的 数据 类 型 必须 和 数据 库 中 的 数 
据 类 型 保持 一 致 ,否则 会 出 现 错误 。 

在 这 个 案例 中 使 用 的 是 手工 方式 建立 实体 化 类 ,但 在 实际 工程 中 会 建立 很 多 包含 大 量 
字段 的 数据 表 , 可 以 通过 相应 的 工具 来 完成 这 个 工作 。 


3.4.3 配置 映射 文件 


在 建立 完 实 体 类 后 ,还 需要 配置 映射 文件 ,映射 文件 的 作用 是 告诉 程序 实体 类 和 数据 库 
表 的 映射 关系 ,好 比 一 张 地 图 .失去 了 这 张 地 图 程序 便 无 法 得 知 实体 类 的 操作 该 对 应 执行 到 
哪 张 表 中 。 

映射 文件 一 般 都 命名 为 类 名 . hbm. xml, 放 置 在 src 目录 下 ,现在 在 src 文件 夹 下 新 建 一 
个 文件 命名 为 user. cfg. xml, 并 编辑 内 容 如 下 : 
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<?xml version = "1.0"?> 
<! DOCTYPE hibernate — mapping PUBLIC " — //Hibernate/Hibernate Mapping DTD 3. 0//EN" 
"http://www. hibernate. org/dtd /hibernate — mapping - 3. 0. dtd "> 
< hibernate — mapping > 
<class name = "mypro. user" table = "users"> 
< id name = "id" type= "int"> 
< column name = "id" /> 
< generator class = "identity" /> 
</id> 
< property name = "email" type = "String "> 
< column name = "email" /> 
</property> 
< property name = "password " type= "String "> 
< column name = "password " /> 
</property> 
</class> 
«/hibernate - mapping» 


Class 标签 的 name 属性 对 应 着 建立 的 类 名 ,table 属性 对 应 着 数据 中 的 表 名 ,property 
标签 则 用 来 配置 类 成 员 属 性 和 数据 表 字 段 的 对 应 关系 。 

在 配置 好 映射 文件 后 ,还 需要 建立 一 个 Hibernate 的 配置 文件 ,在 这 个 文件 中 将 进行 
Hibernate 的 基本 数据 库 连接 配置 。 通 常 将 该 配置 文件 命名 为 Hibernate. cfg. xml, 并 放置 
在 src 文件 夹 下 , Hibernate 通过 该 文件 的 配置 数据 连接 到 数据 库 , 并 读 取 相关 的 映射 文件 。 
新 建 该 文件 ,编辑 内 容 如 下 : 


<?xml version = "1.0" encoding = "utf 一 8"?> 

<! DOCTYPE hibernate — configuration PUBLIC 

" - //Hibernate/Hibernate Configuration DTD 3. 0//EN" 

"http://www. hibernate. org/dtd /hibernate - configuration - 3. 0. dtd "> 

< hibernate - configuration» 

< session- factory > 

< property name = "hibernate. bytecode. use_reflection_optimizer"> false </property> 

< property name = "hibernate. connection. driver_class"> org. postgresql. Driver </property> 

< property name = "hibernate. connection. url"> jdbc: postgresql : / /1ocalhost:5432/mydb </property> 
< property name = "hibernate. connection. username"> 这 里 填写 数据 库 的 用 户 名 </property> 

< property name = "hibernate. connection. password "> 这 里 填写 数据 的 密码 </property> 

< property name = "hibernate. dialect"> org. hibernate. spatial. dialect. postgis. PostgisDialect 
</property> 

< property name = "hibernate. format_sql"> true </property> 


<property name = "hibernate. search. autoregister_listeners"> false </property> 
< property name = "hibernate. show_sql"> true </property> 

« property name = "hibernate. connection. pool_size"> 20 </property> 

< property name = "hibernate. proxool.pool alias"» pooll </property> 

< property name = "hibernate.max fetch depth "> 1 </property> 

< property name = "hibernate. jdbc. batch versioned data"» true </property> 

< property name = "hibernate. jdbc.use streams for binary"» true </property> 
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< property name = "hibernate. cache. region prefix"> hibernate. test </property> 

< property name = "hibernate. cache. provider class"» org. hibernate. cache. Hashtable CacheProvider 
</property> 

< mapping resource = "user. hbm. xml"/> 

«/session- factory» 

</hibernate - configuration» 


这 里 配置 了 Hibernate 的 一 些 基 本 参数 ,现在 不 需要 去 深究 里 面 所 有 标签 的 意思 ,下 面 
简单 介绍 几 个 比较 重要 的 标签 。 


< property name = "hibernate. connection. driver_class"> org. postgresql. Driver </property> 
配置 正确 的 JDBC。 

< property name = "hibernate. connection. url"> jdbc:postgresql://localhost:5432/mydb </property> 
这 里 设置 正确 的 数据 库 地 址 ,端口 和 数据 库 名 。 


< property name = "hibernate. connection. username"> 这 里 填写 数据 库 的 用 户 名 </property> 
< property name = "hibernate. connection. password "> 这 里 填写 数据 的 密码 </property> 


设置 连接 数据 库 时 的 用 户 和 密码 ,这 里 的 信息 和 安装 数据 库 时 候 输 入 的 信息 保持 一 致 
到 目前 为 止 ,基本 的 底层 工作 已 经 完成 了 ,现在 可 以 开始 对 业务 迎 辑 编写 程序 了 。 


3.4.4 写 人 数据 库 实例 


本 节 在 之 前 案例 的 基础 上 ,以 添加 一 个 新 用 户 为 例 , 来 实现 通过 Hibernate 进行 数据 库 
的 数据 写 入 。 

先 创 建 一 个 类 用 于 数据 库 的 基本 操作 。 新 建 一 个 类 ,名 为 userDao, 这 个 类 主要 用 于 实 
现 一 些 数据 库 的 基本 操作 ,现在 实现 一 个 insert 操作 的 方法 用 于 进行 用 户 数据 的 插入 工作 。 


package mypro; import java.util.List; import org. hibernate. Query; 
import org. hibernate. Session; 
import org. hibernate. SessionFactory; 
import org. hibernate. Transaction; 
import org. hibernate. cfg. Configuration; import mypro.user;public class usersDao { 
Static SessionFactory sessionFactory; 
Static Session session ; 
Static Transaction tx ; // 插 入 
public void insert(user user) 
{ 
init(); 
session. save(user) ; 
close(); 
} 
@SuppressWarnings( "deprecation" ) 
private void init() 
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{ 
sessionFactory = new Configuration().configure().buildSessionFactory(); 
session = sessionFactory. openSession(); 
tx = session. beginTransaction() ; 

} 

private void close() 

{ 


tx. commit(); 
session. close(); 
sessionFactory. close(); 


} 


再 新 建 一 个 名 为 userService 的 类 ,这 个 类 主要 用 于 业务 逻辑 的 处 理 。 单 从 编程 的 角度 
讲 , 在 userDao 中 就 可 以 实现 全 部 的 功能 ,但 将 永久 层 和 业务 层 分 离 利于 之 后 工作 的 展开 。 
编辑 这 个 类 的 内 容 如 下 : 


package mypro; import java. util. List; import mypro. usersDao; 
import mypro. user; 
public class userService { 
private usersDao dao; 
public userService()( 
dao = new usersDao(); 
} 
/* 
* 添加 一 个 新 的 用 户 
*/ 
public boolean addUser(user user) { 
dao. insert(user) ; 
return true; 


} 


这 个 类 仅仅 是 调用 了 userDao 中 的 方法 ,可 能 userService 这 个 类 会 显得 多 余 , 但 实际 
工作 中 业务 逻辑 会 比 这 个 更 加 复杂 ,比如 在 添加 新 用 户 时 候 要 检测 用 户 是 否 重复 ,数据 校 
验 ,异常 的 捕获 和 处 理 等 通常 都 会 在 业务 层 的 类 中 实现 。 

接 下 来 创建 一 个 action 类 用 于 注册 请 求 的 接受 。 创 建新 类 ,命名 为 handleRegister, 编 
辑 内 容 如 下 : 


package mypro; import java. util. Map; 

import com. opensymphony. xwork2. ActionContext; 

import com. opensymphony. xwork2. ActionSupport; 

import mypro. userService; 

import mypro. user;public class handleRegister extends ActionSupport { 
private String email; 
private String password ; 
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public String execute() throws Exception { 
userService us = new userService(); 
user user - new user(); 
user. setEmail(email); 
. setPassword (password ); 
us. addUser(user); 
return SUCCESS; 

} 

public String getEmail() { 
return email; 

} 

public void setEmail(String email) { 
this.email = email; 

} 

public String getPassword () { 
return password ; 

} 

public void setPassword (String password ) { 
this. password = password ; 

} 

) 


这 个 类 中 分 别 定义 email 和 password 的 成 员 变 量 , 用 于 接收 前 台 传 送 来 用 户 输入 的 参 
数 。 同 时 实例 化 一 个 userService 方法 ,通过 其 addUser() 方 法 插入 一 个 新 的 用 户 。 

现在 后 台 处 理 插入 的 工作 已 经 完成 了 , 接 下 来 处 理 视图 部 分 ,建立 一 个 注册 的 页 面 和 对 
应 的 动作 类 ,新建 一 个 名 为 register 的 action 类 ,编辑 内 容 如 下 : 


package mypro; import com. opensymphony. xwork2. ActionSupport; import mypro. userService; 
import mypro.user;public class register extends ActionSupport { 
private String type; 
public String execute() throws Exception { 
return type; 
} 
public String getType() { 
return type; 
} 
public void setType(String type) { 
this. type = type; 
} 
} 


这 个 类 中 没有 进行 多 余 的 逻辑 操作 ,这 个 类 的 主要 作用 是 用 于 显示 注册 页 面 。 现 在 新 
建 一 个 名 为 register 的 模板 页 面 ,编辑 内 容 如 下 : 
<% @ page language = "java" contentType = "text/html; charset = UTF — 8" 


pageEncoding = "UTF - 8" > 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
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loose. dtd "> 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type="text/css"> 
body(text - align: center; } 
# login- box{width :300px;margin:0 auto;margin- top: 100px; } 


</style> 
</head> 
< body> 
<div id= "login - box"> 
<hl > 注册 新 的 用 户 </hl > 


< form action = "handleRegister. action" meth od = "post"> 
< input type = "hidden" name = "type" value = "register"> 
<ul class = "lee - form - normal"> 


<li> 
<div class = "lee - input"> 
< label > 邮箱 </label > 
< input type = "text" name = "email" value= ""» 
</div> 
</li> 
<li> 
<div class = "lee - input"> 
< label > 密码 </label > 
< input type = "password " name = "password " value = ""> 
</div> 
</li> 
<li> 
< input class = "lee - button" style = "width :80px" type = "submit" value = "提交 "> 
</li> 
</ul> 
</form> 
</div> 
</body> 
</html> 


最 后 在 struts. xml 中 配置 之 前 编写 的 action 类 ,在 文件 中 添加 以 下 代码 : 


«action name = "register" class = "nypro. register"> 
< result name = "register">/templets/register. jsp</result > 
</action> 
« action name = "handleRegister" class = "mypro. handleRegister"> 
< result name = "success" type = "redirectAction"> 
« paran name 
< param name = "action name"> home «/param > 
</result > 


namespace">/</param > 
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< result name = "update" type = "redirectAction"> 
< param name = "namespace">/</param > 
<param name = "action name"> home </param > 


</result > 
</action> 


这 里 用 到 了 type X redirectAction 的 result. 3X 4 2878 ff result 的 作用 是 跳 转 到 另外 一 
个 action, 当 用 户 添加 完成 后 页 面 会 直接 跳 转 到 home. action 的 用 户 列表 页 面 。 但 目前 还 
没有 做 数据 库 读 取 的 部 分 ,所 以 新 添加 的 数据 还 不 能 显示 出 来 ,但 可 以 通过 直接 查看 数据 库 
中 的 内 容 查看 数据 是 否 添加 成 功 。 

现在 打开 浏览 器 输入 地 址 http://localhost: 8080/mypro/register. action? type = 
register, 可 以 看 到 显示 除了 添加 新 用 户 的 注册 界面 ,现在 随意 输入 一 个 测试 用 的 账户 信息 ， 


并 添加 ,如 图 3. 4-1 所 示 。 


3.4-1 注册 一 个 新 的 用 户 


3.4.5 读 取 数据 库 实例 

现在 已 经 可 以 向 数据 库 中 添加 数据 了 ,本 节 将 讲解 如 何 读 取 数 据 库 中 的 数据 并 通过 一 
个 表格 显示 出 来 。 现 在 进一步 修改 之 前 编写 的 userDao 和 userService 类 ,在 其 中 增加 读 取 
数据 库 的 方法 。 首 先 编辑 userDao 如 下 : 


package mypro; import java.util.List; import org. hibernate. Query; 
import org. hibernate. Session; 
import org. hibernate. SessionFactory; 
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import org. hibernate. Transaction; 
import org. hibernate. cfg. Configuration; import mypro.user;public class usersDao { 
Static SessionFactory sessionFactory; 
Static Session session ; 
Static Transaction tx ; 
// 查 询 所 有 
public List < user > loadAll()( 
init(); 
Query query = session.createQuery("from user"); 
«user» list = query.list(); 
close(); 
return list; 
) MA 
public void insert(user user) 
{ 
init(); 
session. save(user); 
close(); 
} 
@SuppressWarnings( "deprecation" ) 
private void init() 
{ 
sessionFactory = new Configuration().configure().buildSessionFactory(); 
session = sessionFactory. openSession(); 
tx = session. beginTransaction(); 
} 


private void close() 


{ 
tx.commit(); 
session.close(); 
sessionFactory.close(); 
) 


) 


其 中 添加 了 一 个 查询 所 有 记录 的 方法 ,查询 并 返回 类 型 为 list 的 数据 ,这 里 还 用 到 了 
hibernatesession 的 createQuery 方法 ,通过 这 个 方法 可 以 执行 特定 的 SQL 语句 。 

现在 继续 编辑 userService 类 ,在 其 中 增加 一 个 查询 的 方法 调用 userDao 中 的 方法 , 编 
辑 内 容 如 下 : 


package mypro; import java. util. List; import mypro. usersDao; 
import mypro. user; 
public class userService { 
private usersDao dao; 
public userService(){ 
dao = new usersDao() ; 


} 
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/* 
* 添加 一 个 新 的 用 户 
x/ 
public boolean addUser(user user) { 
dao. insert(user) ; 
return true; 
} 
/* 
* 查询 所 有 用 户 
*/ 
public List < user» getAll(){ 
return dao. loadAll(); 
} 
} 


到 目前 为 止 ,已 经 实现 了 从 数据 库 中 查询 数据 的 部 分 了 , 接 下 来 要 做 的 是 将 查询 出 来 的 
数据 显示 到 指定 的 页 面 中 。 因 为 之 前 已 经 创建 了 一 个 静态 的 home. jsp 页 面 用 于 用 户 列表 
的 显示 ,现在 需 在 此 基础 上 修改 增加 数据 的 动态 显示 。 打 开 home 的 action 类 ,编辑 内 容 
如 下 : 


package mypro; 
import java.util.List; import com. opensymphony. xwork2. ActionSupport; public class home extends 
ActionSupport ( 
private List < user > users; 
private userService us; 
public String execute() throws Exception { 
us 7 new userService(); 
users = us.getAll(); 
return SUCCESS; 
} 
public List < user > getUsers() { 
return users; 
} 
public void setUsers(List < user» users) { 
this.users = users; 
} 
} 


在 这 个 类 中 实例 化 了 一 个 userService 对 象 ,并 调用 了 查询 方法 将 结果 赋值 给 了 该 类 的 
成 员 变量 users, 该 变量 是 一 个 list 类 型 ,通过 其 get 方法 可 以 在 jsp 页 面 中 对 数据 进行 调 
用 。 继 续 编辑 home. jsp 页 面 ,编辑 内 容 如 下 : 

<% @ taglib prefix- "s" uri- "/struts- tags" %> 

<% @ page language = "java" contentType = "text/html; charset = UTF — 8" 


pageEncoding = "UTF - 8" %> 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
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loose. dtd "> 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base.css" type = "text/css" rel = "stylesheet"> 
<style type = "text/css"> 
body(text - align: center; } 
# login- box{width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
< div class = "lee- container"> 
< hl > 用 户 管理 页 面 < a href = " handleLogin. action? type = unlogin">【 注 销 登录 】</a><a 
href = "register. action? type = register">{ JI JH P! «/a » «/h1 > 
«table class = "lee- table lee - table - strip lee- table - th color" 
<tr> 
«th» ID</th> 
<th> 用 户 邮箱 </th> 
<th> 密 码 </th> 
</tr> 
<s:iterator value= "users" var = "user"> 
<tr> 
< td»« s:property value =" % {id}"/></td> 
<td>< s:property value =" % {email}"/></td> 
< td»« s:property value = " % (password }"/></td> 
</tr> 
</s: iterator > 
</table> 
</div> 
</body> 
</html> 


这 里 通过 struts2 的 iterator 标签 实现 了 对 users 的 遍历 显示 ,在 实际 工程 中 经 常 要 查 
询 批量 的 数据 ,因此 该 标签 在 实际 应 用 中 非常 有 用 。 通 过 该 标签 可 以 实现 对 数组 Map, List 
等 数据 的 遍历 ,这 里 简单 介绍 一 下 遍历 List 的 方法 ,遍历 其 他 类 型 数据 基本 大 同 小 异 。 
«s:iterator value = "遍历 对 象 名 "> 
<tr> 
« td»« s:property value=" {遍历 对 象 的 成 员 变量 }"/></td> 
</tr> 
</s:iterator> 
现在 打开 浏览 器 ,输入 地 址 http://localhost :8080/mypro/home. action ,可 以 看 到 之 前 
添加 的 数据 已 经 被 显示 出 来 了 ,如 图 3. 4-2 所 示 。 


第 3 章 ”JavaWeb 服 务 器 端 开发 基础 > 71 


【< S rr IT THENENND ig OG 
【添加 用 户 】 


3.4-2 ”遍历 显示 数据 库 的 数据 


3.4.6 数据 库 删 除 实例 


现在 已 经 完成 了 数据 库 的 数据 添加 和 显示 , 接 下 来 实现 数据 的 删除 。 新 建 action 类 , 命 
名 为 userManager, 编 辑 内 容 如 下 : 


package mypro; import com. opensymphony. xwork2. ActionSupport; 
import mypro. userService; 
import mypro. user; public class userManager extends ActionSupport { 
private String type; 
private int userld; 
private userService us; 
public String execute() throws Exception { 
us = new userService(); 
if(type. equals("delete"))( 
us. delete(userId); 
) 
return type; 
) 
public int getUserId() { 
return userId; 
} 
public void setUserId(int userId) { 
this. userId = userId; 
} 
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public String getType() { 
return type; 

) 

public void setType(String type) ( 
this.type - type; 


} 


当 删 除 某 个 用 户 的 时 候 会 将 该 用 户 的 主键 ID 传送 到 这 个 action 中 ,通过 主键 进行 查找 
并 删除 相关 的 数据 。 相 应 地 ,继续 编辑 userService 和 userDao 这 两 个 类 ,在 其 中 分 别 添加 
相应 的 方法 ,编辑 userDao 内 容 如 下 : 


package mypro; import java. util. List; 
import org. hibernate. Query; 
import org. hibernate. Session; 
import org. hibernate. SessionFactory; 
import org. hibernate. Transaction; 
import org. hibernate. cfg. Configuration; 
import mypro. user; public class usersDao { 
Static SessionFactory sessionFactory; 
Static Session session ; 
Static Transaction tx ; // 查 询 所 有 
public List < user > loadAll()( 
init(); 
Query query = session. createQuery("from user"); 
List <user> list = query.list(); 
close(); 
return list; 
} 
// 插 入 
public void insert(user user) 
{ 
init(); 
session. save(user) ; 
close(); 


// 删 除 
public boolean delete(int id){ 
init(); 
session.delete((user) session.get(user.class, id)); 
close(); 
return true; 
) 
@SuppressWarnings("deprecation") 
private void init() { 
sessionFactory = new Configuration().configure().buildSessionFactory(); 
session = sessionFactory. openSession(); 
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tx = session. beginTransaction(); 
} 
private void close() { 
tx.commit(); 
session.close(); 
sessionFactory.close(); 
} 
} 


这 里 通过 hibernate session 的 delete 方法 可 以 删除 一 条 数据 。 继 续 编 辑 userService. 


package mypro; import java. util.List; 
import mypro. usersDao; 
import mypro. user; 
public class userService { 
private usersDao dao; 
public userService()( 
dao 7 new usersDao(); 
} 
/* 
* 添加 一 个 新 的 用 户 
*/ 
public boolean addUser(user user){ 
dao. insert(user); 
return true; 
} 
/* 
* 查询 所 有 用 户 
*/ 
public List « user» getAll()( 
return dao. loadAll(); 
} 
/* 
* 删除 一 个 用 户 
*/ 
public boolean delete(int id){ 
return dao.delete(id); 
} 
} 


在 struts. xml 文件 中 添加 对 应 的 action 配置 ,在 用 户 被 成 功 删除 后 页 面 将 直接 跳 转 回 
用 户 列表 页 面 。 


<action name = "userManager" class = "mypro. userManager"> 
< result name = "delete" type = "redirectAction"> 

< param name = "namespace">/</param> 

< param name = "action name"> home </param> 


74 Á| WebGIS 工 程 项 目 开 发 实践 


</result > 
</action> 


在 用 户 列表 的 模板 页 面 中 添加 相应 的 删除 按钮 ,修改 后 的 home. jsp 页 面 如 下 : 


<% (à taglib prefix- "s" uri = "/struts- tags" +> 
<% @ page language = "java" contentType = "text/html; charset = UTF — 8" 
PageEncoding = "UTF - 8" %> 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type = "text/css"> 
body{ text - align: center; } 
# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
< div class = "lee - container"> 
< hl > 用 户 管理 页 面 <a href = " handleLogin. action? type = unlogin">【 注 销 登录 】</a><a 
href = "register. action?type = register »[ ğin H P! )«/a » «/h1 > 
<table class = "lee - table lee - table - strip lee- table - th color"> 
<tr> 
<th> ID</th> 
<th> 用 户 邮箱 </th> 
<th> 密 码 </th> 
<th > 操作 </th> 
</tr> 
<s:iterator value= "users" var = "user"> 
<tr> 
« td»« s:property value =" % {id}"/></td> 
« td»« s:property value =" % {email}"/></td> 
« td»« s:property value =" % (password }"/></td> 
< td > < a href 7 "/nypro/userManager. action? type = delete&userld = < s: 
property value=" % {id}"/>"> 删 除 信 息 </a> | 


</td> 
</tr> 
</s:iterator> 
</table> 
</div> 
</body> 
</html > 


继续 在 列表 页 面 中 增加 编辑 功能 ,通过 增加 一 个 a 标签 来 实现 对 用 户 的 删除 ,前面 已 经 
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讲 过 前 台 发 送 请 求 到 后 台 主 要 通过 get 或 者 post 两 种 方法 ,这 里 通过 a 标签 可 以 更 加 方便 
地 实现 用 户 删除 接口 的 调用 ,在 遍历 显示 用 户 数据 的 时 候 程 序 动态 地 将 用 户 的 主键 ID 作为 
参数 连接 在 链接 地 址 的 后 面 。 当 用 户 单 击 该 链接 时 会 直接 跳 转 到 相应 的 地 址 进行 删除 功能 
的 操作 。 

现在 重新 发 布 程序 ,在 浏览 器 中 测试 一 下 删除 功能 可 否 正常 工作 ,如 图 3. 4-3 所 示 。 


cO ee EC earn <j 
用 户 管理 页 面 【注销 登录 】 【添加 用 户 】 


testl@testcom 


图 3. 4-3 ”删除 一 条 记录 
单 击 删除 信息 可 以 看 到 用 户 信息 已 经 被 删除 了 ,如 图 3. 4-4 所 示 。 


cS LINETTTCCUURGXHRIIIIUTEENNNGS 
用 户 管理 页 面 【注销 登录 】 【添加 用 户 】 


图 3.4-4 ”成功 删除 一 条 记录 
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3.5 Spring 框架 的 使 用 


3.5.1 Spring 简介 


Spring 是 一 个 开源 框架 , 它 由 RodJohnson 创建 。 它 是 为 了 解决 企业 应 用 开发 的 复杂 
性 而 创建 的 。Spring 使 用 基本 的 JavaBean 来 完成 以 前 只 能 由 EJB 完成 的 事情 。 然 而 ， 
Spring 的 用 途 不 仅 限于 服务 器 端的 开发 。 从 简单 性 .可 测试 性 和 松 斐 合 的 角度 而 言 , 任 何 
Java 应 用 都 可 以 从 Spring 中 受益 。Spring 是 一 个 轻 量 级 的 控制 反 转 (CIoC) 和 面向 切面 
(CAOP) 的 容器 框架 。 

1. ER 

就 大 小 与 开销 两 方面 而 言 ,Spring 都 是 轻 量 的 。 完 整 的 Spring 框架 可 以 在 一 个 大 小 只 
有 1MB 多 的 JAR 文件 里 发 布 。 并 且 Spring 所 需 的 处 理 开 销 也 是 微不足道 的 。 此 外 ， 
Spring 是 非 侵入 式 的 : Spring 应 用 中 的 对 象 不 依赖 于 Spring 的 特定 类 。 

Spring 通过 一 种 称 作 控 制 反 转 (IoC) 的 技术 促进 了 松 耦 合 。 当 应 用 了 IoC, 一 个 对 象 依 
赖 的 其 他 对 象 会 通过 被 动 的 方式 传递 进来 ,而 不 是 这 个 对 象 自己 创建 或 者 查找 依赖 对 象 。 
你 可 以 认为 ToC 与 JNDI 相反 一 一 不 是 对 象 从 容器 中 查找 依赖 ,而 是 容器 在 对 象 初始 化 时 
不 等 对 象 请 求 就 主动 将 依赖 传递 给 它 。 

2. 面向 切面 

Spring 提供 了 面向 切面 编程 的 丰富 支持 ,允许 通过 分 离 应 用 的 业务 逻辑 与 系统 级 服务 
(例如 审计 (Cauditing) 和 事务 (transaction) 管理 ) 进 行内 聚 性 的 开发 。 应 用 对 象 只 实现 完成 
业务 逻辑 而 已 。 它 们 并 不 负责 (甚至 是 意识 ) 其 他 的 系统 级 关注 点 ,例如 日 志 或 事务 支持 。 

3. 容器 

Spring 包含 并 管理 应 用 对 象 的 配置 和 生命 周期 ,在 这 个 意义 上 它 是 一 种 容器 ,用 户 可 
以 配置 每 个 bean, 基 于 一 个 可 配置 原型 (prototype)bean 可 以 创建 一 个 单独 的 实例 或 者 每 
次 需要 时 都 生成 一 个 新 的 实例 。 然 而 .Spring 不 应 该 被 混同 于 传统 的 重量 级 的 EJB 容器 ， 
它们 经 常 是 庞大 与 笨重 的 。 

Spring 可 以 将 简单 的 组 件 配置 ,组 合成 为 复杂 的 应 用 。 在 Spring 中 ,应 用 对 象 被 声明 
式 地 组 合 , 典 型 的 是 在 一 个 XML 文件 里 。Spring 也 提供 了 很 多 基础 功能 (事务 管理 ,持久 
化 框架 集成 等 ) ,将 应 用 逻辑 的 开发 留 给 了 用 户 。 

所 有 Spring 的 这 些 特征 使 用 户 能 够 编写 更 干净 、 更 易 管理 并 且 更 便于 测试 的 代码 。 它 
们 也 为 Spring 中 的 各 种 模块 提供 了 基础 支持 。 


3.5.2 Spring 的 配置 


本 章 主 要 讲解 Struts2、Hibernate、Spring 的 结合 使 用 ,对 版 本 协调 有 一 定 要 求 ,如 果 版 
本 匹配 不 恰当 也 可 能 会 造成 错误 。 为 了 避免 不 必要 的 麻烦 ,可 以 直接 使 用 下 载 struts2 包 中 
Lib 文件 夹 下 的 Spring 包 。 
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首先 将 lib 下 Spring 开头 的 Jar 文件 复制 到 项 目 工 
程 的 WEB-INF/lib 文件 夹 下 ,如 图 3. 5-1 所 示 。 

同时 还 需要 将 Struts2 的 Spring ffi (Ff struts2- 
spring-plugin-3. 3. 16. jar 放置 到 工程 中 ,否则 程序 将 无 
法 正常 工作 。 

为 了 让 Spring 开始 工作 ,在 web. xml 中 增加 Spring 
的 监听 ,新 的 web. xml 编辑 如 下 : 


<?xml version - "1.0" encoding = "UTF 一 8"?> 


El spring-web-3.0.5 RELEASE jar 

国 spring-test-3.0.5. RELEASE jar 

E] spring-expression-3.0.5.RELEASE jar 
国 spring-core-3.0.5.RELEASE jar 

国 spring-context-3.0.5.RELEASE jar 

E] spring-beans-3.0.5. RELEASE jar 

E] spring-asm-3.0.5. RELEASE jar 


[E] spring-aop-3.0.5. RELEASE jar 


图 3. 5-1 需要 用 到 的 Spring 包 


< web - app id= "WebApp 9" version = "2.4" xnlns = "http://java. sun. com/xml/ns/j2ee" xnlns:xsi 
= "http://www. w3. org/2001/XMLSchema — instance" xsi: schemaLocation = "http://java. sun. com/ 
xnl/ns/j2ee http: // java. sun. con/xnl/ns/;j2ee/web- app 2 4. xsd"»« display- name» Struts Blank 


</display - name >< filter > 
< filter - name> struts2 </filter - name> 


< filter - class > org. apache. struts2. dispatcher. ng. filter. StrutsPrepareAndExecuteFilter 


«/filter- class > 
</filter >< filter — mapping> 
< filter - name> struts2 </filter - name> 
< url- pattern>/ * «/url- pattern» 
</filter - mapping» 

<! -- spring 监听 --> 

< context - param > 


< paran - name > contextConf igLocation «/param — name > 
< param - value >/WEB — INF/applicationContext. xml «/param - value > 


«/context - param > 
< listener > 
< listener - class > 


org. springframework. web. context. ContextLoaderListener 


</listener - class > 
</listener > 
</web - app» 


Erp , < param-value > /WEB-INF/applicationContext. xml</param-value> JÈ Spring 配 
置 文件 的 路 径 ,org. springframework. web. context. ContextLoaderListener 是 Spring 的 监 
听 类 , 它 包 含 在 之 前 引入 的 spring 的 包 中 。 配 置 完成 后 重启 项 目 , 如 果 没 有 错误 ,就 说 明 


Spring 已 经 正确 地 配置 完成 了 。 


3.5.3 Spring 和 Struts2、Hibernate 的 整合 


本 节 以 实现 用 户 信息 更 新 为 例 讲解 Spring 的 基本 使 用 。 首 先 要 做 的 工作 是 创建 相应 
的 模板 文件 .Action 类 等 。 编 辑 用 户 信息 的 第 一 步 是 完成 用 户 的 编辑 界面 , 当 用 户 单 击 编 
辑 某 一 位 用 户 的 链接 时 需要 从 数据 库 中 查询 该 用 户 的 信息 填充 到 用 户 的 编辑 表 中 ,也 就 是 


数据 查询 和 显示 的 实现 。 
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首先 编辑 userDao 和 userService ,添加 相应 的 查询 和 修改 方法 ,编辑 usrDao 如 下 : 


package mypro; import java. util. List; 
import org. hibernate. Query; 
import org. hibernate. Session; 
import org. hibernate. SessionFactory; 
import org. hibernate. Transaction; 
import org. hibernate. cfg. Configuration; 
import mypro. user; public class usersDao { 
Static SessionFactory sessionFactory; 
Static Session session ; 
Static Transaction tx ; 


// 读 取 

public user get(int id) 

{ 
init(); 
user obj - (user) session.get(user.class, id); 
close(); 
return obj; 

} 

// 查 询 所 有 

public List < user > loadAll()( 
init(); 


Query query = session.createQuery("from user"); 
List <user> list = query.list(); 
close(); 
return list; 
} 
// 更 新 
public void update(user user) 
{ 
init(); 
session. update(user); 
close(); 
} 
// 插 入 
public void insert(user user) 
{ 
init(); 
session. save(user) ; 
close(); 
} 
// 删 除 
public boolean delete(int id)( 
init(); 
session.delete((user) session.get(user.class, id)); 
close(); 
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return true; 
} 
(à SuppressWarnings("deprecation") 
private void init() 
t 
sessionFactory = new Configuration().configure().buildSessionFactory(); 
session = sessionFactory.openSession(); 
tx = session. beginTransaction(); 
} 


private void close() 


t 
tx.connit(); 
session.close(); 
sessionFactory.close(); 
} 


} 


这 里 通过 调用 Hibernate 的 get 方法 ,并 通过 用 户 的 主键 Id 查询 其 数据 ,通过 update 
方法 更 新 数据 。 在 userService 中 增加 相应 的 方法 。 


package mypro; import java. util. List; 
import mypro. usersDao; 
import mypro. user; 
public class userService ( 
private usersDao dao; 
public userService()( 
dao = new usersDao(); 
} 
/* 
* 添加 一 个 新 的 用 户 
*/ 
public boolean addUser(user user) { 
dao. insert(user) ; 
return true; 
} 
/* 
* 更 新 一 个 用 户 
*/ 
public boolean updateUser(user user){ 
dao. update(user); 
return true; 
} 
/* 
* 查询 一 个 用 户 
*/ 
public user getUser(int id){ 
return dao.get(id); 
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} 
/* 
* 查询 所 有 用 户 
x/ 
public List < user? getAll()( 
return dao. loadAll(); 
} 
/* 
* 删除 一 个 用 户 
*/ 
public boolean delete(int id){ 
return dao.delete(id); 


) 
创建 一 个 Action 类 ,命名 为 editUser, 在 这 个 类 中 通过 type 参数 来 区 分 是 显示 编辑 界 
面 还 是 提交 修改 数据 请 求 。 


package mypro; import com. opensymphony. xwork2. ActionSupport; 
import mypro. userService; 
import mypro. user; 
public class editUser extends ActionSupport { 
private user user; 
private userService us; 
private int userId; 
private String type; 
public String execute() throws Exception { 
if (type. equals("update"))( 
us. updateUser(user) ; 
} 
if(type. equals("edit"))( 
user = us.getUser(userId); 
return "edit"; 
} 
return type; 
} 
public int getUserId() { 
return userId; 
} 
public void setUserId(int userId) { 
this. userId = userId; 
} 
public user getUser() { 
return user; 
} 
public void setUser(user user) { 
this.user = user; 
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} 

public userService getUs() ( 
return us; 

} 

public void setUs(userService us) { 
this.us = us; 

} 

public String getType() { 
return type; 

} 

public void setType(String type) { 
this. type = type; 

} 

} 


仔细 观察 这 个 类 和 之 前 建立 的 类 的 区 别 。 在 这 个 类 中 用 到 了 userService 这 个 类 ,但 是 
并 没有 通过 new 实例 化 一 个 对 象 ,因为 程序 将 通过 Spring 注入 这 个 对 象 ,这 样 做 的 好 处 是 
可 以 更 清楚 地 管理 各 个 类 之 间 的 关系 ,降低 模块 和 模块 之 间 的 耦合 。 

在 WEB-INF 文件 夹 下 新 建 一 个 文件 命名 为 applicationContext. xml, 并 编辑 如 下 : 


<?xml version = "1.0" encoding = "UTF - 8"?> 
< beans xmlns = "http://www. springframework. org/schema/beans" 
xmlns:xsi = "http://www. w3. org/2001/XMLSchema — instance" 
xmlns:aop = "http://www. springframework. org/schema/aop" 
xmlns:tx = "http://www. springframework. org/schema/tx" 
xsi: schemaLocation =" 
http: //www. springframework. org/schema/beans http://www. springframework.org/ 
schema/beans/spring - beans - 2.5. xsd 
http://www. springframework. org/schema/aop http://www. springframework.org/ 
schema/aop/spring - aop- 2.5. xsd 
http://www. springframework. org/schema/tx http://www. springframework.org/ 
Schema/tx/spring- tx- 2.5. xsd"» 
< bean nane = "editUser" class = "mypro. editUser"> 
< property name = "us" 
< ref bean = "userService"/> 
</property> 
</bean> 
< bean name = "userService" class = "mypro. userService"> 
</bean> 
</beans > 


在 这 个 配置 文件 中 通过 bean 标签 映射 了 相应 的 类 .并 通过 property 注入 了 该 类 中 需 
要 实例 化 的 userService 对 象 , 在 程序 工作 时 无 需 手工 new 实例 化 对 象 ,这 些 工 作 将 全 权 交 
给 Spring 来 完成 。 

最 后 ,在 home.jsp 中 添加 编辑 用 户 信 息 的 链接 ,通过 get 方法 跳 转 到 对 应 的 信息 编辑 
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界面 。 编辑 后 的 文件 如 下 : 


<% @ taglib prefix- "s" uri- "/struts - tags" %> 
<% (à page language = "java" contentType = "text/html; charset = UTF - 8" 
pageEncoding = "UTF - 8" %> 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base.css" type = "text/css" rel = "stylesheet"> 
<style type = "text/css"> 
body{text - align: center; } 


# login- box(width :300px;margin:0 auto;margin- top: 100px; } 
</style> 
</head> 
< body> 
< div class = "lee- container"> 
<hl > 用 户 管理 页 面 < a href = "handleLogin. action? type = unlogin">【 注 销 登录 】</a><a 
href = "register. action?type = register [i5 iil JH P! J«/a » «/h1 > 
«table class = "lee- table lee - table - strip lee- table - th color" 
<tr> 
«th» ID</th> 
<th> 用 户 邮箱 </th> 
<th> 密 码 </th> 
<th> 操 作 </th> 
</tr> 
<s:iterator value = "users" var = "user"> 
<tr> 
<td>< s:property value =" $ { id}"/></td> 
« td»« s:property value =" $ {email}"/></td> 
« td»« s:property value =" $ (password }"/></td> 
<td>< a href = "/mypro/userManager. action? type = delete&userld = < s: 
property value =" € {id}"/>"> 删 除 信 息 </a> | 
<a href = "/mypro/editUser. action? type = edit&userId = < s: property value 
=" % {idj"/>"> 编 辑 信息 </a> 
</td> 
</tr> 
</s: iterator > 
</table> 
</div> 
</body > 
«/htnl» 


创建 一 个 新 的 用 户 编辑 模板 页 面 ,命名 为 edit. jsp ,编辑 内 容 如 下 : 


<% @ taglib prefix="s" uri- "/struts - tags" %> 
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<% (à page language = "java" contentType = "text/html; charset = UTF— 8" 
pageEncoding = "UTF - 8" %> 
<! DOCTYPE html PUBLIC " — //W3C//DTD HTML 4. 01 Transitional//EN" "http://www. w3. org/TR/htm14/ 
loose. dtd "> 
<html> 
<head> 
<meta charset = "utf - 8"> 
< link href = "leeui/style/leeui - base. css" type = "text/css" rel = "stylesheet"> 
<style type = "text/css"> 
body(text - align: center; } 
# login - box{width :300px;margin:0 auto;margin- top: 100px; } 


</style> 
</head> 
< body> 
<div id= "login - box" 
< hl > 编辑 用 户 信 息 </hl > 


< form action = "editUser. action" meth od = "post"> 

< input type = "hidden" name = "type" value = "update" 

< input type = "hidden" name = "user. id" value = "< s:property value = "user. id" />"> 
<ul class = "lee- form - normal" 


«li» 
<div class = "lee - input"> 
< label > 邮箱 </label > 
< input type = "text" name = "user. email" value = "< s:property value =" 
user. email" />"> 


«/div» 
</li> 
<li> 
<div class = "lee- input"> 
< label > 密码 </label > 


< input type = "password " name = "user. password " value = "< s: property 
value = "user. password " />"> 
</div> 
</li> 
<li> 
< input class = "lee- button" style = "width :80px" type = "submit" value = "提交 "> 
</li> 
</ul> 
</form> 
</div> 
</body> 
</html> 


现在 回头 查看 之 前 编写 的 editUser, 在 其 中 并 没有 定义 相关 的 email 和 password AE 
量 ,而 是 直接 定义 了 一 个 user 对 象 ,在 struts2 中 允许 以 对 象 的 方式 传送 数据 ,这 个 特性 在 
数据 繁多 的 项 目 中 十 分 有 用 。 
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在 编辑 的 模板 文件 中 ,我 们 定义 相应 的 属性 为 user 属性 名 , 便 可 以 直接 接收 整个 user， 
十 分 方便 。 最 后 配置 struts. xml 文件 使 得 之 前 创建 的 Action 可 以 正确 运行 ,编辑 后 的 文件 
如 下 : 


<?xml version = "1.0" encoding = "UTF - 8" ?> 
<! DOCTYPE struts PUBLIC 
" — //Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
"http: //struts. apache. org/dtd s/struts — 2.3. dtd "> 
< struts > 
< constant name = "struts. enable. DynamicMeth odInvocation" value = "false" /> 
< constant name = "struts. devMode" value = "true" /> 
< package nane = "default" namespace = "/" extends = "struts - default"> 
< interceptors > 
< interceptor name = "loginCheck" class = "mypro. loginInterceptor"> 
</ interceptor > 
< interceptor - stack name = "myStack"> 
< interceptor - ref name = "loginCheck"/> 
< interceptor — ref name = "defaultStack"/> 
</interceptor - stack > 
</interceptors > 
< default - interceptor - ref name = "myStack"></default - interceptor - ref > 
< global - results > 
< result name = "unlogin">/templets/login. jsp</result > 
< result name = "error">/error. jsp</result > 
«/global- results > 
< action name = "helloWorld" class = "mypro. helloWorld"> 
< result >/templets/helloWorld. jsp</result > 
</action> 
< action name = "home" class = "mypro. home"> 
< result name = "success">/templets/home. jsp </result > 
</action> 
<action name = "uploadFile" class = "mypro. UploadFile"> 
< result name = "success">/templets/uploadFile. jsp</result > 
</action> 
< action name = "handleUploadFile" class = "mypro. HandleUploadFile"> 
< result name = "success">/templets/displayUpload. jsp </result > 
</action> 
< action name = "register" class = "mypro. register"> 
< result name = "register">/templets/register. jsp </result > 
</action> 
< action name = "handleRegister" class = "mypro. handleRegister"> 
< result name = "success" type = "redirectAction"> 
param name = "namespace">/</param > 
< param name = "action name"> home </param> 
</result > 
< result name = "update" type = "redirectAction"> 
< param name = "namespace">/</param> 
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< param name = "action name"> home </param > 
</result > 
</action> 
<action name = "userManager" class = "mypro. userManager"> 
< result name = "delete" type = "redirectAction"> 
< param name = "namespace">/</param > 
<param name = "action name"> home </param> 
</result > 
</action > 
<action name = "editUser" class = "editUser"> 
« result name = "edit">/templets/edit. jsp</result > 
< result name = "update" type = "redirectAction"> 
<param name = "namespace">/</param > 
< param name = "action name"> home </param> 
</result > 
</action> 
</package > 
< package name = "login" namespace = "/" extends = "struts - default"> 
< action name = "login" class = "nypro. login"> 
< result >/templets/login. jsp</result > 
</action > 
< action name = "handleLogin" class = "mypro. handleLogin"> 
< result name = "login">/templets/loginResult. jsp </result > 
< result name = "unlogin">/templets/unlogin. jsp</result > 
< result name = "wrong">/templets/wrong. jsp </result > 
</action> 
</package > 


</struts > 


打开 浏览 器 测试 ,首先 添加 一 个 新 的 测试 用 户 , 如 图 3. 5-2 所 示 。 


test@test.com 


图 3. 5-2 使 用 Spring 实现 用 户 信息 的 编辑 
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单 击 编辑 信息 后 可 以 看 到 正确 的 显示 出 用 户 的 基本 信息 ,如 图 3. 5-3 所 示 。 


Raj 5| & htp://ocalhost8080/mypro/editUser.acion?ypeze B P ~ BCX = 


图 3.5-3 使 用 Spring 实现 用 户 信息 的 编辑 


修改 test@test. com 为 admin(? test. com, 并 提交 修改 ,可 以 看 到 用 户 类 表 中 的 用 户 信 
息 已 经 正确 地 修改 了 ,如 图 3.5-4 所 示 。 


用 户 管理 页 面 【注销 登录 】 【添加 用 户 】 


图 3. 5-4 ”用户 管理 页 面 


WebGIS 开发 技术 篇 


本 篇 主要 介绍 WebGIS 开发 的 两 大 主流 平台 ArcGIS 和 OpenGIS, 
第 4 章 简单 地 介绍 WebGIS 的 相关 概念 及 实现 技术 ; 第 5 章 介 绍 ArcGIS 
for Server 网 络 地 图 应 用 开发 ,通过 具体 的 服务 发 布 过 程 来 引导 读者 快 
速 入 门 ; 第 6 章 介绍 OpenGIS 及 OpenGIS 平台 的 搭建 ,通过 一 些 具体 的 
示例 代码 来 建立 对 OpenGIS 更 加 清晰 的 认识 。 


WebGIS 


随 着 Internet 的 迅猛 发 展 和 广泛 使 用 ,人 们 对 地 理 信息 系统 的 需求 也 日 益 增 长 ， 
Internet 已 成 为 新 的 GIS 操作 平台 , 它 与 GIS 结合 而 形成 的 Web GIS (网 络 地 理 信 息 系统 ) 
是 GIS 软件 发 展 的 必然 趋势 。Web GIS 也 真正 成 为 一 种 大 众 使 用 的 工具 。 目 前 ,网 络 技术 
在 GIS 中 的 应 用 主要 有 三 种 模式 : 集中 模式 .C/S 模式 和 B/S 模式 ,其 中 基于 B/S 模式 的 
Web GIS 是 一 种 新 型 的 模式 ,用 来 解决 C/S 模式 下 Web GIS 所 面临 的 问题 和 满足 用 户 对 
信息 管理 的 需求 。 

相信 大 家 对 百度 地 图 .谷歌 地 图 等 相关 应 用 已 经 非常 熟悉 了 。 通 过 这 些 应 用 ,我 们 可 以 
浏览 地 图 .定位 自己 的 位 置 . 查 找 我 们 的 兴趣 点 .搜索 交通 路 线 等 。 其 实 ,这 些 功能 是 
WebGIS 最 基本 的 一 些 功能 。 那 么 什么 是 WebGIS W? 

GIS 的 全 名 是 Geographic Information System. 中文 全 名 是 地 理 信息 系统 。 它 是 在 计 
算 机 硬件 、 软 件 系统 支持 下 ,对 整个 或 部 分 地 球 表层 (包括 大 气 层 ) 空 间 中 的 有 关 地 理 分 布 数 
据 进行 采集 、 储 存 .管理 .运算 分析. 显示 和 描述 的 技术 系统 。 自 从 20 世纪 60 年 代 “GIS 之 
4"RogerTomlinson 创建 了 GISCGeographic Information System) 这 个 缩 略 语 之 后 ,这 个 领 
域 已 经 发 生 了 翻天 覆 地 的 变化 。 如 今 , 学 生 在 “地 理 信 息 科 学 ”“ 测 绘 "“ 空 间 信 息 系统 ”等 
相关 课程 上 都 能 遇 到 许多 相同 的 基本 内 容 。GIS 里 面 的 G 已 经 被 解读 为 “全 球 的 ”(global) 
以 及 “地 理 空间 的 ”(geospatial) ,而 不 是 最 初 的 地理 的 ”(geographic); S 也 不 是 当初 的 “ 系 
统 ”(system) ,而 是 “科学 ”(science)、“ 服 务 ”(services) 和 “研究 ”(studies)。 但 是 ,要 寻找 一 
个 词 来 描述 所 有 这 些 内 容 的 共同 点 ,“ 地 理 空间 ”(geospatial) 或 许 是 最 佳 的 选项 。 

撤 开 这 些 星 涩 的 文字 ,我 们 争取 用 更 形象 的 方法 来 介绍 GIS 这 个 学 科 。 人 类 在 很 久之 
前 就 已 经 开始 使 用 羊皮 或 者 纸 质 的 地 图 了 ,主要 用 途 是 给 行军 、 航 海 等 做 向 导 , 而 这 同样 也 
是 现代 GIS 最 基本 的 功能 之 一 。 到 19 世纪 时 ,现代 GIS 学 科 开 始 慢 慢 萌芽 。 这 里 有 一 个 
很 著名 的 例子 。1854 年 伦敦 发 生 霍 乱 ,10 天 就 死 了 500 人 。 居 民 大 多 怀疑 冶 疫 是 由 于 地 下 
的 墓穴 引起 的 ,产生 了 极 大 的 社会 恐慌 。 当 时 有 个 有 名 的 医生 叫 Snow 博士 ,他 不 信 这 个 原 
因 ,为 了 查 出 真正 的 霍乱 源头 .他 首先 绘 出 了 伦敦 地 图 ,然后 将 所 有 霍乱 病人 的 所 在 地 标 出 
来 ,终于 发 现 了 一 个 有 趣 的 现象 ,在 伦敦 的 一 个 居民 饮水 井 附近 出 现 的 霍乱 病人 最 多 ,并 且 
最 开始 出 现 的 霍乱 病人 也 是 在 那里 发 现 的 。 最 后 Snow 博士 对 那 口 井 进行 检查 ,确定 了 霍 
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乱 发 生 的 源头 。 从 这 个 例子 可 以 看 出 ,地 图 的 应 用 已 经 不 再 局 限于 导航 了 ,而 开始 慢 慢 利用 
其 得 天 独 厚 的 时 间 、 空 间 优势 与 其 他 学 科 进 行 结合 。 

到 了 20 世纪 ,计算 机 的 出 现 、 人 造 卫 星 的 升天 等 技术 突破 ,GIS 这 个 学 科 也 相应 地 开始 
走向 成 熟 并 开始 普及 。20 世纪 60 年 代 , 加 拿 大 科学 家 首先 提出 了 GIS 这 个 学 科 。 到 了 20 
世纪 末 , 一 大 批 优秀 的 GIS 软件 已 经 出 现 , 比 如 Esri 公司 的 ArcGIS 系列 .MapInfo 公司 的 
MaplInfo。 国 内 的 GIS 从 20 世纪 80 年 代 开 始 起 步 , 比 较 有 名 的 有 GeoStar, MapGIS 等 。 

而 此 时 的 GIS 已 不 再 局 限于 纸 上 的 地 图 了 , 它 已 经 成 为 一 个 计算 机 技术 和 多 种 学 科 交 
叉 的 新 型 学 科 了 。 它 涉及 测量 学 一 一 地 理 信息 的 采集 和 地 图 的 制作 等 ,计算 机 科学 一 一 电 
子 地 图 的 制作 、 展 现 以 及 各 种 GIS 功能 的 实现 ,物理 学 一 一 对 传感器 的 研究 以 及 光谱 和 影 
像 的 研究 ,气象 学 一 一 大 气 层 等 对 卫星 影像 的 影响 等 ,生物 学 .医学 .犯罪 学 等 一 一 研究 地 理 
等 各 时 间 空 间 因 素 对 这 些 学 科 的 影响 。 

GIS 是 什么 呢 ? 最 通俗 易 懂 的 解释 就 是 ,GIS 是 利用 测绘 生成 纸 制 地 图 或 者 通过 航拍 
以 及 卫星 拍摄 生成 影像 后 ,将 这 些 数 据 存 储 在 计算 机 中 ,以 地 图 或 图 片 的 形式 表现 出 来 , 然 
后 根据 实际 生产 、 生 活 以 及 科研 中 的 各 种 需求 ,进而 提供 具体 的 经 过 处 理 的 数据 。 


4.1 WebGIS 简介 


人 类 活动 中 75% 一 80% 的 信息 与 地 理 空间 位 置 有 关 , 地 理 信息 系统 是 一 种 采集 、 处 理 、 
储存 ,管理 ,分 析 、 输 出 地 理 空间 数据 及 其 属性 信息 的 计算 机 信息 系统 。 自 20 世纪 60 年 代 
诞生 以 来 ,GIS 发 展 迅速 ,应 用 日 趋 广泛 和 深化 ,逐步 融入 信息 技术 的 主流 ,正在 成 为 信息 产 
业 新 的 增长 点 ,是 发 展 潜力 巨大 的 地 理 信息 产业 的 主要 组 成 部 分 之 一 。 如 今 ,GIS 的 应 用 已 
经 成 为 我 国 国民 经 济 和 社会 信息 化 建设 的 亮点 ,日 益 深入 到 各 个 专业 领域 和 百姓 日 常生 
活 中 。 

GIS 经 历 了 单机 环境 应 用 向 网 络 环境 应 用 的 发 展 过 程 。 网 络 环境 GIS 应 用 从 局 域 网 内 
客户 /服务 器 (Client/Server,C/S) 结 构 的 应 用 向 Internet 环境 下 浏览 器 /服务 器 (Browser/ 
Server,B/S) 结 构 的 WebGIS 应 用 发 展 。 随 着 Internet 的 发 展 , WebGIS 开始 逐步 成 为 GIS 
应 用 的 主流 , WebGIS 相对 于 C/S 结构 而 言 .具有 部 署 方便 、 使 用 简单 、 对 网 络 带 宽 要 求 低 的 
特点 ,为 地 理 信息 服务 的 发 展 莫 定 了 基础 。 

随 着 计算 机 技术 、 网 络 技 术 、 数 据 库 技术 的 发 展 以 及 应 用 的 不 断 深化 ,GIS 技术 的 发 展 
呈现 出 新 的 特点 和 趋势 ,基于 Web 的 GIS 就 是 其 中 之 一 。WebGIS 除了 应 用 于 传统 的 国 
土 、 资 源 、 环 境 等 政府 管理 领域 外 ,也 正在 促进 与 老百姓 生活 息息相关 的 车 载 导航 、 移 动 位 置 
服务 ,智能 交通 ,抢险 救灾 ,城市 设施 管理 现代 物流 等 产业 的 迅速 发 展 。 

早期 的 Web GIS 功能 较 弱 ,主要 用 于 电子 地 图 的 发 布 和 简单 的 空间 分 析 与 数据 编辑 ， 
难以 实现 较为 复杂 的 图 形 交 互 应 用 (如 GIS 数据 的 修改 、 编 辑 和 制图 ) 以 及 复杂 的 空间 分 
析 ,无 法 取代 传统 的 C/S 结构 的 GIS 应 用 ,于 是 出 现 了 B/S 结构 与 C/S 结构 并 存 的 局 面 ， 
而 C/S 结构 涉及 客户 端 与 服务 器 端 之 间 大 量 数据 转 输 ,无 法 在 互联 网 平台 实现 复杂 的 \ 大 
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规模 的 地 理 信息 服务 。 

随 着 电子 政务 和 企业 信息 化 (电子 商务 ) 的 发 展 , 构 建 由 多 个 地 理 信息 系统 构成 的 信息 
系统 体系 ,跨越 传统 的 单个 地 理 信息 系统 边界 ,实现 多 个 地 理 信息 系统 之 间 的 资源 (包括 数 
据 、 软 件 、 硬 件 和 网 络 ) 共 享 、 互 操作 和 协同 计算 ,构建 空间 信息 网 格 (Spatial Information 
Grid) ,成 为 GIS 应 用 发 展 需要 解决 的 关键 技术 问题 。 这 要 求 将 GIS 的 数据 分 析 与 处 理 的 
功能 移 到 服务 器 端 ,通过 多 种 类 型 的 客户 端 ( 如 PC 、 移 动 终端 ) 上 的 Web Browser 或 桌面 软 
件 调 用 服务 器 端的 功能 ,来 实现 传统 C/S 结构 GIS 所 具有 的 功能 ,最 终 使 B/S 结构 取代 
C/S 结构 的 应 用 ,通过 GIS 应 用 服务 器 之 间 的 互 操作 和 协同 计算 ,构建 空间 信息 网 格 。 

B/S 结构 应 用 已 经 由 浏览 器 /网 络 服务 器 /数据 服务 器 (Browser/Web Server/Data 
Server) 三 层 架 构 阶段 进入 到 浏览 器 /网 络 服务 器 /应 用 服务 器 /数据 服务 器 (Browser/ Web 
Server/ Application Server/Data Server) 四 层 架 构 阶 段 。 在 新 的 四 层 架 构 中 ,网 络 服务 器 和 
应 用 服务 器 分 离 ,并 且 其 间 还 可 以 插入 二 次 开发 和 扩展 功能 ,其 中 的 应 用 服务 器 一 般 为 支持 
远程 调用 的 组 件 式 GIS 平台 ,或 由 组 件 式 GIS 平台 封装 而 成 。 将 GIS 复杂 数据 分 析 与 处 理 
功能 (包括 编辑 .拓扑 关系 的 构建 ,对象 关系 的 自动 维护 ` 制 图 ) 移 到 GIS 应 用 服务 器 上 ,使 
客户 端 与 服务 端的 数据 传输 减少 到 最 少 的 程度 ,为 在 Internet. 上 实现 复杂 、 大 规模 的 地 理 信 
息 服 务 提供 了 可 能 。 这 一 架构 带 来 的 巨大 优势 是 使 服务 器 端 具有 极 强 的 扩展 性 ,因此 作为 
应 用 服务 器 的 组 件 式 GIS 所 具备 的 功能 ,都 可 以 通过 B/S 结构 实现 , WebGIS 不 再 是 只 能 
满足 地 图 浏览 和 查询 的 简单 软件 了 ,而 是 一 个 体系 先进 ,功能 强大 的 服务 器 端 GISCServer 
GIS) 。 


4.1.1 什么 是 WebGIS 


WebGIS 是 分 布 式 信息 系统 的 一 种 类 型 ,由 至 少 一 个 服务 器 和 一 个 客户 端 构 成 ,其 中 服 
务 器 是 GIS 服务 器 ,客户 端 是 Web 浏览 器 、 桌 面 应 用 程序 或 移动 应 用 程序 。 简 单 地 说 ， 
WebGIS 可 定义 为 使 用 Web 技术 实现 服务 器 与 客户 端 之 间 通 信 的 任何 GIS。 

WebGIS 必 不 可 少 的 关键 元 素 如 下 : 

CD 服务 器 具有 一 个 URL, 这 样 客户 端 才能 在 Web 上 找到 它 ; 

(2) 客户 端 按照 HTTP 规范 将 请 求 发 送 到 服务 器 ; 

(3) 服务 器 执行 所 请 求 的 GIS 操作 并 通过 HTTP 向 客户 端 发 送 响应 ; 

(4) 向 客户 端 发 送 的 响应 格式 可 以 有 多 种 ,例如 HTML. 二 进 制图 像 XML( 可 扩展 标 
记 语 言 ) 或 JSON(JavaScript 对 象 表示 法 )。 


4.1.2. WebGIS 的 特征 


无 论 客户 端 和 服务 器 彼此 相隔 多 远 , 都 可 利用 Internet 访问 Web 上 的 信息 , 相 较 于 传 
统 的 桌面 GIS, WebGIS 的 明显 优势 包括 : 

(1) 全 球 性 覆盖 : ArcGIS 用 户 可 向 全 球 范围 的 用 户 提 供 一 个 WebGIS 应 用 程序 ,而 所 
有 用 户 都 可 通过 其 计算 机 或 移动 设备 访问 这 些 应 用 程序 。WebGIS 的 全 球 性 延伸 受益 于 当 
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前 广泛 支持 的 HTTP 协议。 几乎 所 有 组 织 都 在 特定 网 络 端口 处 打开 了 防火 墙 , 允 许 HTTP 
请 求 和 响应 在 本 地 网 络 中 传输 ,从 而 提高 了 可 访问 性 。 

(2) 用 户 数 量 众多 : 通常 ,传统 的 桌面 GIS 一 次 只 能 由 一 个 用 户 使 用 ,而 WebGIS 可 由 
数 十 或 数 百 个 用 户 同时 使 用 。 因 此 ,WebGIS 需要 具有 上 比 桌面 GIS 更 高 的 性 能 和 更 好 的 可 
扩展 性 。 

(3) 更 好 的 跨 平 台 性 能 : 大 多 数 WebGIS 客户 端 都 是 Web 浏览 器 ,包括 InternetExplorer、 
MozillaFirefox、AppleSafari、GoogleChrome 等 。 由 于 这 些 Web 浏览 器 大 部 分 都 符合 
HTML 和 JavaScript 标准 ,因而 依赖 于 HTML 客户 端的 WebGIS 往往 可 支持 不 同 的 操作 
系统 ,如 MicrosoftWindows、Linux 和 AppleMacOS, 

(4) 按 用 户 数 计算 的 平均 成 本 低 : 大 多 数 Internet 内 容 对 最 终 用 户 是 免费 的 , WebGIS 
也 是 如 此 。 通 常 ,无 需 购买 软件 或 付费 即 可 使 用 WebGIS。 需 要 为 众多 用 户 提 供 GIS 功能 
的 组 织 也 通过 WebGIS 将 成 本 降 至 最 低 。 无 需 为 每 个 用 户 购买 并 设置 桌面 GIS, 组 织 只 需 
设置 一 个 WebGIS, 所 有 用 户 便 可 从 家 中 、 办 公 室 或 现场 共享 此 单个 系统 。 

(5) 易于 使 用 : 桌面 GIS 专用 于 对 GIS 有 过 数 月 培训 和 经 验 的 专业 用 户 。WebGIS 则 
可 用 于 广泛 的 受众 ,包括 对 GIS 一 无 所 知 的 公共 用 户 。 他 们 和 希望 像 使 用 常规 网 站 那样 简单 
地 使 用 WebGIS, WebGIS 的 设计 简单 .直观 方便 ,通常 比 桌 面 GIS 更 易于 使 用 。 

(6) 统一 更 新 : 对 于 桌面 GIS, 如 果 更 新 到 新 版 本 , 则 需要 在 每 台 计 算 机 上 安装 更 新 程 
序 。 而 对 于 WebGIS, 更 新 一 次 即 可 被 所 有 客户 端 使 用 。 这 种 易 维护 性 使 得 WebGIS 非常 
适合 提供 实时 信息 。 

(7) 多 样 化 的 应 用 程序 : 桌面 GIS 受 限 于 一 定数 量 的 GIS 专业 人 员 , WebGIS 则 可 用 
于 企业 中 的 每 位 员工 以 及 社会 大 众 。 广 泛 的 受众 往往 具有 不 同 的 要 求 。 绘 制 名 人 家 园地 
图 标记 个 人 照片 . 找 出 朋友 所 在 位 置 以 及 显示 WiFi 热点 等 应 用 程序 都 是 WebGIS 的 热门 
应 用 。 

这 些 特征 展现 了 WebGIS 的 优点 及 其 面临 的 挑战 。 例 如 , WebGIS 的 易 用 性 激励 了 
公共 参与 ,但 也 提醒 开发 者 要 考虑 不 具有 GIS 背景 的 Internet 用 户 使 用 的 便利 性 。 因 此 ， 
支持 大 量 用 户 要 求 WebGIS 具有 可 扩展 性 。 接 下 来 介绍 开发 WebGIS 应 用 程序 框架 的 相 
关 知 识 。 


4.1.3 WebGIS 应 用 程序 框架 


作为 GIS 专业 人 士 ,你 的 目标 是 要 向 最 终 用 户 提 供 一 种 WebGIS 应 用 程序 ,使 他 们 无 
需 了 解 大 量 的 GIS 相关 知识 便 可 轻松 地 完成 工作 。 因 此 ,你 所 要 面 对 的 各 种 WebGIS 应 
用 程序 的 概念 必然 比 最 终 用 户 看 到 的 要 复杂 得 多 。 本 节 介 绍 WebGIS 应 用 程序 不 可 或 缺 
的 基本 组 成 部 分 。 这 些 组 成 部 分 提供 了 一 个 完整 的 框架 以 辅助 你 构建 GIS 并 交付 至 最 
终 用 户 。 

1. Web 应 用 程序 

Web 应 用 程序 为 客户 端 提 供 软件 界面 ,其 中 的 工具 用 于 显示 地 理 信息 ,与 地 理 信息 进 
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行 交互 以 及 处 理 地 理 信息 。 它 可 能 是 一 个 在 Web 浏览 器 上 运行 的 ArcGISViewerforFlex 
应 用 程序 ,也 可 以 是 一 个 运行 在 启用 了 GPS 的 外 部 设备 或 智能 电话 (如 iPhone) 上 的 移动 应 
用 程序 。 

为 最 终 用 户 构建 WebGIS 应 用 程序 时 ,可 供 选择 的 应 用 程序 有 很 多 种 。 最 佳 选择 通常 
要 视 用 户 工作 流程 所 需 的 功能 .工具 和 地 图 显示 而 定 。 而 且 ,如 何 选择 应 用 程序 通常 还 要 考 
虑 最 终 用 户 及 其 使 用 计算 机 的 经 验 和 工作 环境 (例如 作业 现场 .上 网 速度 等 ) 。 

2. 数字 底 图 

在 WebGIS 应 用 程序 中 , 底 图 为 各 应 用 程序 提供 了 地 理 环 境 。 应 用 程序 的 类 型 (包括 
水 文 . 宗 地 .电力 公共 设施 和 保护 区 ) 通 常 决定 着 需要 使 用 的 底 图 的 类 型 。 例 如 ,在 针对 水 鸟 
保护 区 的 WebGIS 应 用 程序 中 ,高 分 辨 率 的 正 射 影像 将 成 为 数字 化 湿地 的 合适 底 图 。 

以 下 是 一 些 常 见 底 图 的 示例 : 

(1) 交通 底 图 通常 包含 道路 ,街道 名 称 、 感 兴趣 点 ,概略 的 土地 利用 类 型 .水体 和 地 名 ; 

(2) 地 形 底 图 通常 包含 行政 边界 、 城 市 .水 体 要 素 、 地 形 要 素 、 公 园 、 地 标 、 交 通 和 建 
筑 物 ; 

(3) Terrain 底 图 通常 包含 地 貌 影 像 .深海 探测 学 ,沿海 水 体 要 素 , 旨 在 为 其 他 数据 图 层 
提供 中 立 的 背景 ; 

(4) 影像 底 图 通常 包含 全 世界 的 低 分 辩 率 卫星 影像 和 世界 各 地 选 定 地 理 区 域 的 高 分 辩 
率 卫 星 影像 ; 

(5) 混合 底 图 通常 包含 可 作为 地 图 共 加 图 层 开启 和 关闭 的 可 选 图 层 ,例如 交通 、 地 形 、 
terrain 和 影像 等 地 图 图 层 通 常 作为 可 选 的 底 图 县 加 图 层 , 可 根据 不 同 的 查看 意图 开启 或 
关闭 。 

请 务必 记 住 , 底 图 往往 相对 静止 。 在 典型 设置 下 , 底 图 不 需要 经 常 更 新 。 例 如 ,可 以 安 
排 每 年 更 新 一 次 交通 网 络 来 体现 大 都 市 街道 网 络 的 更 改 。 相 反 , 由 于 地 形 底 图 往往 依赖 于 
国家 级 的 普查 或 调查 成 果 , 因 此 可 能 十 年 才 更 新 一 次 。 

3. 业务 图 层 

业务 图 层 是 在 WebGIS 应 用 程序 中 直接 进行 操作 或 通过 操作 (如 查询 ) 而 获得 的 一 组 
数量 较 少 的 图 层 。 这 些 图 层 通 常 由 GIS 专业 人 员 为 特定 用 户 群 量 身 定做 。 例 如 ,城市 规划 
者 使 用 一 个 运行 GIS 应 用 程序 的 Windows 智能 电话 更 新 下 水 道 或 雨水 排放 系统 图 层 中 检 
修 孔 盖 的 位 置 。 业 务 图 层 包 括 但 不 限于 以 下 内 容 : 

CD 观测 值 或 传感器 馈送 值 : 可 以 反映 状态 或 环境 感知 的 任何 信息 ,例如 犯罪 地 点 、 交 
通 传感器 馈送 值 , 实 时 天 气 、 计 量 仪 读数 (如 流量 计 ) 设备 或 工人 在 现场 测 得 的 观测 值 ,调查 
结果 、 客 户 地 址 ,疾病 地 点 、 空 气质 量 和 污染 监测 等 。 在 WebGIS 地 图 中 ,这 些 信息 源 通常 
显示 为 状态 信息 。 此 外 ,它们 还 经 常 作为 在 服务 器 上 执行 分 析 操 作 的 输入 。 

(2) 编辑 图 层 和 数据 访问 图 层 : 这 些 图 层 是 用 户 要 操作 的 图 层 , 例 如 编辑 要 素 、 执 行 查 
询 和 为 分 析 选 择 要 输入 的 要 素 。 

(3) 查询 结果 : 在 多 数 情 况 下 ,应 用 程序 会 向 服务 器 发 出 查询 请 求 , 而 后 返回 一 组 记录 
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作为 查询 结果 。 结 果 中 可 以 包括 一 组 单个 要 素 或 属性 记录 。 用 户 通 常会 在 WebGIS 应 用 
程序 中 显示 返回 的 结果 ,并 将 其 作为 地 图 图 形 进行 处 理 。 

(4) 由 分 析 模 型 获得 的 结果 图 层 : 可 以 执行 GIS 分 析 以 生成 新 的 信息 ,这 些 新 信息 可 
作为 新 的 地 图 图 层 由 最 终 用 户 添加 、 探 索 .可 视 化 、 解 释 和 比较 。 

在 大 多 数 GIS 应 用 程序 中 ,用 户 会 在 提供 地 理 环境 的 底 图 之 上 处 理 业务 信息 (有 时 是 
多 个 业务 图 层 ) 。 但 有 些 时 候 , 业 务 图 层 会 显示 在 有 助 于 提供 位 置 环境 的 其 他 图 层 的 下 方 。 
例如 , 按 人 口 统计 信息 分 类 和 显示 邮政 编码 或 邮政 编码 地 区 时 ,通常 会 在 这 些 结果 上 符 加 运 
输 线 和 地 名 以 提供 位 置 环境 。 

业务 图 层 通常 是 动态 的 ; 它们 是 从 GIS 数据 库 中 检索 获得 的 ,并 会 在 运行 时 进行 显示 
(例如 每 次 平移 .缩放 或 刷新 地 图 时 )。 通 常 ,业务 图 层 只 在 固定 的 地 图 比例 或 分 辩 率 范围 内 
进行 处 理 。 相 反 , 底 图 却 通常 被 设计 为 在 更 大 的 地 图 比例 范围 内 进行 使 用 。 例 如 , 底 图 通常 
允许 缩小 到 更 大 的 地 图 范围 。 

4. WebGIS 应 用 程序 中 的 任务 和 工具 

WebGIS 应 用 程序 通常 会 提供 一 系列 除 执行 制图 之 外 的 处 理工 具 。 这 些 工具 涵盖 的 范 
围 广泛 一 一 从 普通 类 型 (如 找 出 地 址 到 更 具体 的 类 型 (如 计算 大 城市 潜在 的 屋顶 太阳 能 )。 
运行 任务 的 方法 有 两 种 : 

(1) 客户 端 执行 : 该 方法 适合 相对 简单 的 处 理 以 及 所 需 数据 全 部 存放 在 客户 端的 情 
况 。 典 型 示例 包括 根据 一 组 点 要 素 绘制 分 析 结 果 和 生成 热点 图 。 

(2) 服务 器 执行 : 该 方法 适合 复杂 的 处 理 以 及 所 需 数据 未 存放 在 客户 端的 情况 。 典 型 
示例 包括 找 出 最 近 设 施 点 的 位 置 和 路 线 、. 计 算 流量 ,以 及 通过 蚕 加 大 量 数据 图 层 来 找 出 最 佳 
栖息 地 。 

5. 一 个 或 多 个 地 理 数据 库 

各 种 GIS 应 用 程序 都 需要 依赖 于 强大 的 地 理 空 间 数 据 管 理 框架 ,该 框架 存储 用 于 支持 
应 用 程序 的 信息 。 它 可 以 是 一 个 或 多 个 地 理 数 据 库 .一 组 shapefile、 各 种 表格 数据 库 和 电子 
表格 .CAD 文件 .设计 文件 .影像 .HTMLWeb 页 面 等 。 

GIS 专业 团队 非常 注重 投资 并 构建 高 质量 的 地 理 信息 。 毕 竞 ,由 GIS 获得 的 结果 的 质 
量 是 受到 地 理 数 据 库 中 包含 信息 的 质量 限制 的 。GIS 数据 集 必须 以 统一 的 方式 进行 编辑 ， 
而 且 必 须 一 致 且 可 集成, 这样 才 能 在 地 理 框 架 中 结合 使 用 。 很 多 GIS 用 户 在 创建 和 维护 地 
理 空间 数据 集 上 的 投入 非常 大 。 这 些 信息 储备 在 解决 很 多 问题 时 都 具有 重要 的 价值 。 而 且 
当 你 想 做 的 不 仅仅 是 在 底 图 上 显示 观测 值 时 ,强大 的 地 理 数 据 会 变 得 更 加 重要 。 

到 此 ,我 们 对 WebGIS 应 用 程序 的 框架 有 了 大 致 的 了 解 , 接 下 来 介绍 WebGIS 分 层 处 
理 体系 的 相关 知识 。 


4.1.4 B/S 结构 的 WebGIS 系统 的 分 层 处 理 体系 


WebGIS 系统 B/S 结构 的 空间 数据 的 显示 (或 可 视 化 ) 要 经 过 以 下 四 个 处 理 过 程 : 
CL) 从 空间 数据 源 中 选择 要 显示 的 地 理 实体 的 数据 ; 
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(2) 把 选择 出 来 的 地 理 实体 数据 组 合生 成 一 个 显示 元 素 的 序列 ; 

O 将 显示 元 素 系 列 生成 最 终 要 显示 的 地 图 结果 ; 

CD 将 准备 好 的 地 图 送 往 显示 设备 进行 最 终 显 示 。 

我 们 可 以 把 这 四 个 步骤 分 别称 作 选 择 空间 数据 、 生 成 显示 序列 、 地 图 成 形 和 显示 。 把 上 
述 地 学 空间 数据 可 视 化 的 过 程 看 作 相对 独立 的 步骤 ,每 一 步骤 都 接受 某 一 特定 形式 的 空间 
数据 作 输入 ,并 输出 某 种 形式 的 中 间 结 果 , 上 面 每 一 个 步骤 的 顺利 执行 都 要 先 执行 其 下 相 邻 
的 步骤 ,并 用 下 一 步 提供 的 输出 结果 。 也 就 是 说 ,上 面 步骤 要 调用 下 面 步骤 为 其 服务 ,下 面 
步骤 为 上 面 步骤 提供 服务 。 这 样 一 来 ,就 得 到 了 万 维 网 空间 数据 分 步骤 服务 模型 。 其 中 ,最 
下 面 的 一 个 步骤 从 空间 数据 源 中 得 到 满足 条 件 的 空间 数据 ,最 上 面 一 个 步骤 显示 最 终结 果 。 

分 步骤 服务 模型 不 要 求 相 邻 两 个 步骤 的 执行 必须 在 一 台 机 器 上 , 当 其 中 某 两 个 相 邻 步 
又 被 因特网 分 开 时 ,就 得 到 了 三 种 可 能 的 WebGIS 体系 结构 。 

CD. 客户 端 请 求 地 图 图 像 的 方式 : 在 这 种 结构 下 ,作为 客户 端的 浏览 器 中 进行 图 像 的 
显示 ,而 把 选择 空间 数据 ,生成 显示 元 素 序 列 和 地 图 图 像 的 步骤 放 在 服务 器 端 。 浏 览 器 通过 
服务 器 的 CGI 接口 以 JPEG 或 GIF 图 像 格式 请 求 地 图 图 像 。 

(2) 客户 端 请 求 图 形 元 素 的 方式 : 客户 端 由 地 图 生成 和 显示 两 部 分 组 成 ,通过 Java 
Applet, ActiveX 来 实现 ,由 它们 向 服务 器 请 求 要 显示 的 图 形 元 素 或 地 图 图 像 。 随 着 SVG 
(scalable vector graphics) 和 Web CGM 成 为 万 维 网 协会 (world wide web consortium, 
W3C) 的 标准 ,如 果 用 它们 来 编码 矢量 空间 数据 , 则 浏览 器 可 以 直接 显示 。 

(3) 客户 端 请 求 空 间 数据 的 方式 : 服务 器 端 只 执行 查询 ,从 空间 数据 源 中 得 到 需要 的 
空间 数据 ,然后 把 数据 发 送 到 客户 方 。 巾 浏览 器 上 的 Java Applet, ActiveX 或 浏览 器 插件 来 
进行 后 面 的 工作 。 浏 览 器 生成 最 终结 果 时 ,还 会 向 服务 器 请 求 必要 的 显示 符号 信息 。 

WebGIS 的 这 三 种 体系 结构 各 有 特点 ,可 以 满足 万 维 网 对 不 同 客户 端 和 服务 器 端的 应 
用 要 求 。 但 不 论 采用 哪 种 结构 ,由 于 它们 都 基于 空间 数据 可 视 化 的 分 步骤 服务 模型 ,就 保证 
了 它们 对 空间 数据 处 理 的 一 致 性 。 采 用 这 种 空间 数据 模型 的 WebGIS 系统 实现 ,可 以 保证 
每 个 系统 的 上 一 个 步骤 可 调用 其 他 WebGIS 的 相应 下 面 步 骤 的 服务 。 从 这 个 角度 来 看 ,不 
同 的 客户 /服务 器 结构 ,仅仅 是 确定 哪 两 个 处 理 步骤 之 间 的 服务 调用 跨越 因特网 而 已 ,不 会 
影响 整个 系统 集成 多 个 异 构 系 统 中 空间 数据 的 能 力 。 

分 步骤 服务 模型 使 万 维 网 空间 数据 处 理 具 有 了 开放 性 ,采用 这 种 模型 实现 的 万 维 网 空 
间 数 据 应 用 系统 之 间 可 以 允许 较 好 的 互 操作 。 为 了 能 允许 一 个 系统 的 处 理 步 骤 充 分 享用 另 
一 个 系统 相应 步骤 的 服务 ,还 必须 定义 共同 的 地 图 服务 器 接口 。 

下 面 讲述 实现 WebGIS 的 具体 技术 。 


4.2 WebGIS 实现 技术 


WebGIS 是 利用 Internet 技术 来 扩展 和 完善 GIS 的 一 项 新 技术 ,其 核心 是 在 GIS 中 其 
入 HTTP 标准 的 应 用 体系 ,实现 Internet 环境 下 的 空间 信息 管理 和 发 布 。WebGIS 可 采用 
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多 主机 、 多 数据 库 进行 分 布 式 部 署 ,通过 Internet/Intranet 实现 互联 ,是 一 种 浏览 器 /服务 器 
(B/S) 结 构 ,服务 器 端 向 客户 端 提供 信息 和 服务 ,浏览 器 (客户 端 ) 具 有 获得 各 种 空间 信息 和 
应 用 的 功能 。 

WebGIS 的 发 展 与 GIS 技术 ,信息 技术 和 通信 技术 的 发 展 密 不 可 分 。 许 多 Internet 组 
网 技术 可 直接 移植 于 WebGIS 系统 。 但 WebGIS 自身 还 有 一 些 关 键 技术 必须 解决 ,如 高 质 
量 数据 压缩 技术 .宽带 和 高 码 率 WAP BOR .组件 式 GIS 设计 等 。 随 着 宽带 网 的 加 速 普及 和 
WAP 技术 的 快速 发 展 , WebGIS 的 应 用 领域 将 不 断 拓宽 。 


4.2.1 CGI 技术 


通用 网 关 接 口 (Common Gateway Interface,CGD) 是 较 早 应 用 于 Web GIS 开发 的 方法 。 
它 是 Internet 服务 器 与 应 用 程序 之 间 的 接口 标准 ,在 Hypertext 文件 与 Web 服务 器 应 用 程 
序 之 间 传 递 信息 ,将 Web 服务 器 和 数据 库 服务 器 结合 起 来 ,实时 、` 动 态 地 生成 HTML 文件。 

CGI 的 优势 : 功能 强 ,资源 利用 率 高 ; 跨 平 台 性 好 。 

CGI 的 劣势 : 增加 了 网 络 传输 的 负担 .服务 器 负担 重 . 同 步 多 请 求 问题 .静态 图 像 . 用 户 
界面 的 功能 受 Web 浏览 器 的 限制 。 值 得 一 提 的 是 , Esri 公司 的 ArcView Map Server 和 
MapInfo 公司 的 MapInfo ProServer 都 是 基于 CGI 技术 搭建 的 。 基 于 CGI 模式 的 WebGIS 
体系 结构 的 示意 图 如 图 4. 2-1 所 示 。 


Se) A Sk 
ena 客户 端 请 求 
浏览 器 JP 服务 器 
返回 HTML 
栅 格 图 像 I 


CGI 脚本 
(网 关 ) 
fe] 
属性 数据 库 
rm ODBCL_ 属 性 数据 库 


图 4.2-1 基于 CGI 模式 的 WebGIS 体系 结构 示意 图 


4.2.2 Java Applet 技术 


Java Applet 就 是 用 Java 语言 编写 的 一 些小 应 用 程序 ,它们 可 以 直接 奉 入 到 网 页 中 ,并 
能 够 产生 特殊 的 效果 。 包 含 Applet 的 网 页 称 为 Java-powered 页 ,可 以 称 为 Java 支持 的 
网 页 。 
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当 用 户 访问 这 样 的 网 页 时 ，Applet 被 下 载 到 用 户 的 计算 机 上 执行 ,但 前 提 是 用 户 使 用 
的 是 支持 Java 的 网 络 浏览 器 。 由 于 Applet 是 在 用 户 的 计算 机 上 执行 的 ,因此 它 的 执行 速 
度 不 受 网 络 带 宽 或 者 Modem 存 取 速 度 的 限制 。 用 户 可 以 更 好 地 欣赏 网 页 上 Applet 产生 的 
多 媒体 效果 。 

在 Java Applet 中 ,可 以 实现 图 形 绘制 .字体 和 颜色 控制 .动画 和 声音 的 插入 人 机 交互 
及 网 络 交流 等 功能 。Applet 还 提供 了 名 为 抽象 窗口 工具 箱 (Abstract Window Toolkit， 
AWT) 的 窗口 环境 开发 工具 。AWT 利用 用 户 计算 机 的 GUI 元 素 ,可 以 建立 标准 的 图 形 用 
户 界面 ,如 窗口 按钮 .滚动 条 等 。 目 前 ,在 网 络 上 有 非常 多 的 Applet 范例 来 生动 地 展现 这 
些 功能 ,读者 可 以 去 调 阅 相应 的 网 页 以 观看 它们 的 效果 。 

Java Applet 的 优势 : 体系 结构 中 立 , 与 平台 和 操作 系统 无 关 , 动 态 运 行 , 无 需 在 用 户 端 
预先 安装 ,服务 器 和 网 络 传输 的 负担 轻 , 安 全 可 靠 ,GIS 操作 速度 快 。 

Java Applet 的 劣势 : 客户 端 负荷 较 重 ,速度 不 快 ,分 析 功 能 有 限 。 

采用 这 一 技术 搭建 的 WebGIS 有 ActiveMaps、BigBook 等 ,基于 Java Applet 的 
WebGIS 体系 结构 示意 图 如 图 4. 2-2 所 示 。 


客户 端 (Web 浏 览 器 ) GIS 数 据 请 求 
GIS Java Applet 服务 器 端 


GIS Java Applet 控 件 


以 及 数据 文件 


(Web 服 务 器 ) 


(GIS 的 操作 、 分 析 、 数 


GIS 服 务 器 ) 
据 的 显示 等 ) ( 


(CGI 服务 器 ) 


图 4.2-2 基于 Java Applet 的 WebGIS 体系 结构 示意 图 


4.2.3 Plug-in 技术 


Plug-in( 插 件 ) 是 由 美国 网 景 公 司 (Netscape) 开 发 的 增加 网 络 浏览 器 功能 的 方法 。 它 提 
供 了 一 套 应 用 程序 接口 (APD ,可 用 于 研制 和 网 络 浏览 器 直接 交换 信息 的 专门 的 软件 包 。 
插件 最 大 优点 在 于 当 需 要 时 暂时 接 入 ,用 完 后 又 可 以 脱 开 以 释放 系统 资源 ,减少 网 络 、 服 务 
器 的 信息 流量 和 压力 。 

Plug-in 的 优势 : 客户 端 处 理 能 力 强 ,GIS 服务 器 和 网 络 传输 的 负担 较 轻 ,支持 多 种 GIS 
数据 ,GIS 操作 速度 快 。 

Plug-in 的 劣势 : GIS Plug-in 与 平台 相关 ,数据 具有 相关 性 ,插件 管理 不 便 ,更 新 困难 ， 
客户 端 功 能 有 限 等 。 

基于 Plug-in 技术 的 WebGIS 有 Autodesk 的 MapGuide, 基 于 Plug-in 技术 的 WebGIS 
原理 如 图 4. 2-3 BAR 。 
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4.2-3 基于 Plug-in 的 WebGIS 体系 结构 示意 图 


ri 


4.2.4 ActiveX 技术 
ActiveX 是 一 个 开放 的 集成 平台 ,为 开发 人 员 ,用户 和 Web 生产 商 提供 了 一 个 快速 而 
简便 的 在 Internet 和 Intranet 创建 程序 集成 和 内 容 的 方法 。 使 用 ActiveX ,可 轻松 方便 地 在 
网 页 中 插入 多 媒体 效果 、 交 互 式 对 象 以 及 复杂 程序 。ActiveX 技术 的 优势 和 劣势 如 下 : 
ActiveX 的 优势 : 具有 GIS Plug-in 模式 的 所 有 优点 ,软件 复 用 性 高 。 
ActiveX 的 劣势 : 与 平台 相关 ,兼容 性 较 差 ,需要 下 载 ,安全 性 不 高 。 
基于 ActiveX 控件 的 WebGIS 有 Intergraph 的 GeoMedia Web Map, 三维 控件 VRMap 


等 。 基 于 ActiveX 技术 的 原理 如 图 4. 2-4 所 示 。 
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以 及 数据 文件 


(Web 服 务 器 ) 
(GIS 服 务 器 ) 


GIS ActiveX 控 件 


(GIS 的 操作 、 分 析 、 
数据 的 显示 等 ) 


4.2-4 基于 ActiveX 的 WebGIS 体系 结构 示意 图 


4.2.5 Server API 技 术 

Server API 又 称 为 服务 器 应 用 程序 接口 , 它 是 为 克服 CGI 方式 的 效率 低下 而 开发 出 来 
的 扩充 的 CGI 工具 ,其 基本 原理 与 CGI 类 似 ,不 同 的 是 CGI 程序 可 以 单独 运行 ,而 由 于 
Server API 应 用 程序 是 Web 服务 器 进程 的 组 成 部 分 ,所 以 必须 在 特定 的 服务 器 上 运行 ,一 
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般 依附 于 特定 的 Web 服务 器 ,如 微软 ISAPI 依附 于 IIS, 且 不 能 脱离 Windows 平台 ,因为 
Server API 不 像 CGI 可 以 单独 运行 , 它 运 行 于 Web 服务 器 的 进程 中 ,一 旦 启动 ,会 一 直 处 
于 运行 状态 ,不 需要 每 次 都 重新 启动 ,因此 运行 效率 远 高 于 CGI 程序 。 该 技术 的 优势 和 劣 
SUF : 

Server API 的 优势 : 运行 效率 比 CGI 更 高 ,安全 可 靠 传输 。 

Server API 的 劣势 ISAPI DLL 和 服务 器 密切 相关 ,程序 的 可 移植 性 差 , 受 限于 ISAPI 
DLL ,系统 的 维护 和 管理 复杂 。 

基于 Server API 的 WebGIS 原理 如 图 4. 2-5 所 示 。 


客户 端 】 URL 请 求 
Web 
浏览 器 返回 HTML 
栅 格 图 像 
eus] 
KC 23 
ODBCL_ 属 性 数据 库 
客户 端 


图 4.2-5 基于 Server API 的 WebGIS 体系 结构 示意 图 


综合 以 上 5 种 主流 的 WebGIS 开发 技术 的 优 缺 点 ,在 现实 当中 ,CGI、Java Applet 和 
Plug-in 技术 使 用 得 很 少 ; ActiveX 技术 在 3D 项 目 中 应 用 较 多 ; Server API 技术 应 用 的 最 
多 ,是 当下 最 主流 的 WebGIS 开发 技术 。 其 中 ,ArcGIS Server 就 是 一 款 Server API 的 二 次 
开发 平台 。 随 着 WebGIS 的 飞速 发 展 ,其 应 用 领域 在 不 断 扩 大 。 可 以 预见 , 随 着 GIS 和 IT 
技术 的 不 断 发 展 ,WebGIS 将 会 朝 着 一 个 分 布 式 的 .开放 的 ,大众 化 的 ,全球 性 的 方向 发 展 。 
未 来 的 WebGIS 必 将 会 像 目 前 一 些 常 用 的 Web 信息 服务 一 样 的 价 廉 、 方 便 , 快 捷 且 功能 

第 5 章 重 点 介绍 基于 Server API 技术 的 二 次 开发 平台 ArcGIS。 


ArcGIS for Server 
网 络 地 图 应 用 开发 


5.1 ArcGIS for Server 简介 


ArcGIS Server 是 一 个 发 布 企业 级 GIS 应 用 程序 的 综合 平台 ,提供 了 创建 和 配置 GIS 
应 用 程序 和 服务 的 框架 ,可 以 满足 各 种 客户 端的 需求 ,这 是 对 ArcGIS Server 的 抽象 描述 ， 
那么 ArcGIS Server 在 GIS 应 用 中 具体 扮演 什么 样 的 角色 呢 ? 

使 用 过 ArcGIS 桌面 应 用 软件 的 人 知道 ,在 桌面 环境 中 存在 各 种 GIS 工具 可 供 使 用 ,如 
展现 GIS 数据 可 以 用 ArceMap、ArcGlobe, 根 据 位置 寻 址 可 以 使 用 address locator, 对 数据 进 
行 分 析 操 作 可 使 用 ArcToolbox 的 Geoprocessing 工具 。 它 们 包含 了 不 同 级 别 的 GIS 功能 ， 
从 底层 来 看 ,都 是 通过 ArcObjects 来 实现 的 。 

从 ArcGIS Server 的 角度 看 ,我 们 不 再 考虑 要 处 理 的 数据 是 ArcMap 的 mxd 文档 、 
ArcGlobe 的 3dd 文档 .还 是 address locators 等 。 相 应 地 ,我 们 用 服务 的 概念 来 对 它们 进行 
描述 ,这 些 服务 可 以 是 map services, globe services, geocode services. GIS 资源 依托 这 些 服 
务 存在 , 当 需 要 在 GIS Server 上 共享 一 个 地 图 时 ,就 使 用 该 地 图 的 mxd 来 定义 一 个 Map 
Service。 可 以 看 出 ,ArcGIS Server 的 目的 就 是 宿主 各 种 服务 ,并 为 客户 端 应 用 提供 这 些 服 
务 资 源 , 另 外 ,ArcGIS Server 提供 了 一 个 管理 程序 来 对 服务 进行 控制 与 管理 。 


5.1.1 什么 是 ArcGIS Server 


ArcGIS for Server 软件 使 你 的 地 理 信息 可 供 组 织 中 的 其 他 人 使 用 ,或 者 供 具 有 
Internet 连接 的 任何 人 使 用 。 这 可 通过 Web 服务 完成 ,从 而 使 功能 强大 的 服务 器 计算 机 能 
够 接收 和 处 理 其 他 设备 发 出 的 信息 请 求 。ArcGIS for Server 使 你 的 GIS 对 平板 电脑 .智能 
手机 、 笔 记 本 电脑 .台式 工作 站 以 及 可 连接 到 Web 服务 的 任何 其 他 设备 开放 。 

要 使 用 ArcGIS for Server, 需 要 准备 硬件 .软件 和 数据 ,然后 设置 GIS Web 服务 。 最 
后 ,可 通过 不 同类 型 的 应 用 程序 来 使 用 服务 。 

1. 准备 硬件 .软件 和 数据 

用 于 服务 器 的 硬件 的 功能 通常 比 其 他 台式 计算 机 更 加 强大 。ArcGIS for Server 需要 
能 够 运行 64 位 操作 系统 的 计算 机 。ArcGIS for Server 的 架构 具有 可 扩展 性 ,这 意味 着 你 可 
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以 在 需要 额外 的 处 理 能 力 时 添加 多 台 计算 机 。 

根据 组 织 要求 , 可 能 需要 IT 员工 的 帮助 来 使 你 的 服务 器 通过 Internet 进行 访问 。 规 划 
硬件 和 环境 时 ,请 记 住 ArcGIS for Server 还 可 以 部 署 在 虚拟 机 或 商用 云 平 台 ( 如 Amazon 
ECHE, 

ArcGIS for Server 一 经 安装 便 可 立即 开始 使 用 ,你 也 可 以 通过 安装 ArcGIS Web 
Adaptor 将 其 与 你 所 在 组 织 现 有 的 Web 服务 器 进行 集成 。 要 发 布 GIS Web 服务 ,还 需要 在 
组 织 中 至 少 一 台 计 算 机 上 安装 ArcGIS for Desktop ,这 台 计 算 机 不 必 是 服务 器 。 

2. 发 布 GIS Web 服务 

如 果 你 使 用 过 ArcGIS for Desktop ,那么 你 就 会 知道 如 何 使 用 ArcMap 和 ArcGlobe 等 
应 用 程序 来 查看 和 分 析 GIS 数据 。 你 在 将 Web 服务 发 布 到 ArcGIS for Server 时 会 使 用 相 
同 的 应 用 程序 。 可 在 ArcGIS for Desktop 中 制作 地 图 、 地 理 处 理 模型 PIR IAG HE VB ft, 
GIS 资源 ,并 使 用 简单 的 向 导 来 将 其 作为 Web 服务 共享 。 

作为 共享 进程 的 一 部 分 ,ArcGIS 会 提醒 所 发 布 的 资源 中 可 能 存在 的 性 能 问题 。 它 还 会 
检查 注册 的 数据 位 置 列表 ,了 解 在 将 资源 移 至 服务 器 后 是 否 需要 修复 任何 路 径 。 

可 将 表 5. 1-1 中 的 资源 类 型 发 布 到 ArcGIS for Server。 


表 5.1-1 
创建 该 资源 的 ArcGIS for 
GIS 资源 该 资源 在 ArcGIS for Server 中 的 作用 Deskop AMEE 
制图 、 网 络 分 析 、 网 络 材 盖 服 务 (WCS) 发 
布 . 网 络 要 素 服务 (WFS) 发 布 .网 络 地 图 
服务 (WMS) 发 布 .网 络 地 图 切片 服务 
ia (WMTS) 发 布 .移动 数据 发 布 .KML | AMP 
布 .地理 数据 库 数 据 提取 和 复制 ,要 素 访 
问 发 布 .Schematics 发 布 
地 址 定位 器 地 理 编码 ArcCatalog 或 ArcMap 中 的 目录 窗口 
地 理 数据 库 Sake See ee VESA ArcCatalog 或 ArcMap 中 的 目录 窗口 


di; WFS 发 布 
地 理 处 理 模型 或 工具 | 地 理 处 理 、 网 络 处 理 服务 (WPS) 发 布 ArcMap( 结 果 窗 口中 的 地 理 处 理 结果 ) 
ArcGlobe 文 档 3D 制图 ArcGlobe 

HH A ic HE SHAE BR 
HEE. X LUE 


数据 集 或 镶嵌 数据 集 | PEE CS WMS RR ArcCatalog 或 ArcMap 中 的 目录 窗口 
的 图 层 文件 

GIS 内 容 所 在 的 文件 

夹 和 地 理 数据 库 创建 组 织 的 GIS 内 容 的 可 搜索 索引 ArcMap 


如 果 不 希 望 立即 发 布 (例如 ,如 果 你 无 法 直接 访问 服务 器 计算 机 ) ,可 改 为 保存 服务 定义 
文件 并 稍 后 发 布 。 服 务 定义 中 包含 稍 后 发 布 服务 所 需 的 所 有 数据 路 径 和 属性 。 你 甚至 可 以 
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选择 包含 所 有 源 数据 ,使 你 能 够 真正 将 服务 打包 成 一 个 可 传输 的 文件 。 

发 布 期 间 , 你 将 启用 部 分 功能 以 定义 用 户 的 服务 使 用 方式 。 例 如 ,“ 要 素 访问 ”是 一 个 很 
受 欢迎 的 功能 , Web 用 户 通过 此 功能 在 地 图 服务 中 编辑 矢量 要 素 。 另 一 个 示例 功能 为 
WMS, 用 于 通过 开放 地 理 空间 联盟 (OGC) 的 Web 地 图 服务 (WMS) 规 范 来 呈现 服务 。 

如 果 你 发 现 Web 服务 无 法 提供 所 需 的 精确 的 功能 或 业务 逻辑 ,可 通过 服务 器 对 象 
(SOE) 进 行 扩展 。SOE 可 通过 ArcObjects 扩展 Web 服务 的 基本 功能 ,ArcObjects 是 用 于 
构建 Esri 系列 产品 的 大 型 组 件 套件 。SOE 是 需要 进行 自 定义 开发 的 高 级 选项 ,但 在 编写 后 
即 可 轻松 部 署 到 你 的 服务 器 或 与 其 他 人 共享 。 除 ArcGIS for Server 外 ,运行 SOE 无 需 使 
用 任何 其 他 特殊 软件 。 

3. 使 用 GIS Web 服务 

Web 服务 一 经 运行 , 便 可 在 任意 应 用 程序 .设备 或 可 通过 HTTP( 超 文本 传输 协议 ) 通 
信 的 API 中 使 用 这 些 服 务 。 

ArcGIS. com map viewer 可 以 制作 和 保存 显示 你 的 服务 的 在 线 地 图 。 可 选择 将 你 的 服 
务 与 其 他 服务 进行 至 加 ,并 将 你 的 地 图 保存 在 ArcGIS Online 中 ,这 是 Esri 云 托 管 的 在 线 内 
容 资 料 档案 库 。 

ArcGIS Viewer for Flex 和 ArcGIS Viewer for Silverlight 提供 交互 式 向 导 , 为 你 的 服 
务 构建 美观 ,功能 强大 的 Web 地 图 应 用 程序 。 

ArcGIS API for JavaScript, ArcGIS API for Flex, ArcGIS API for Silverlight, iOS, 
Android fll Windows Phone 支持 你 在 自己 设计 的 界面 中 开发 自 定 义 应 用 程序 ,该 应 用 程序 
能 够 使 用 你 所 有 的 Web 服务 。 

ArcGIS for Desktop 应 用 程序 (如 ArcMap 和 ArcGlobe) 旨 在 使 用 ArcGIS for Server 
发 布 的 Web 服务 。 在 这 些 应 用 程序 中 使 用 服务 通常 非常 简单 。 

可 发 出 SOAP 或 REST Web 服务 请 求 的 任何 其 他 应 用 程序 都 可 连接 到 ArcGIS for 
Server。 支 持 的 客户 端 包 括 从 可 搜索 最 近 的 杂货 店 的 智能 手机 和 平板 电脑 应 用 程序 ,到 用 
于 客户 管理 或 资源 规划 的 企业 级 桌面 应 用 程序 。 

4. 维护 服务 器 

随 着 时 间 的 推移 ,在 使 用 服务 器 时 需要 调整 设置 ,添加 和 删除 服务 以 及 设置 安全 性 规 
则 。ArcGIS Server 管理 器 是 每 次 安装 ArcGIS for Server 时 都 会 包含 的 一 个 Web 应 用 程 
序 , 提 供用 于 管理 服务 器 的 直观 界面 。 你 可 使 用 管理 器 查看 服务 器 日 志 , 停 止 和 启动 服务 ， 
发 布 服务 定义 ,针对 安全 性 定义 用 户 和 角色 ,以 及 执行 其 他 类 似 任务 。 

虽然 使 用 管理 器 非常 方便 ,但 你 有 时 可 能 会 希望 通过 编写 脚本 来 自动 管理 服务 器 。 
ArcGIS for Server 具有 REST-ful 管理 员 API, 允许 你 使 用 所 选择 的 脚本 语言 来 自动 执行 
服务 器 管理 任务 。 例 如 ,你 可 以 编写 一 个 Python 脚本 ,用 于 定期 检查 服务 的 正常 运行 状况 
并 在 发 现 服 务 出 现 故 障 时 发 送 电 子 邮 件 。 本 帮助 系统 包含 了 有 关 编 写 服 务 器 管理 脚本 的 各 
种 示例 。 
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5.1.2  ArcGIS for Server 的 组 件 


ArcGIS for Server. 上 提供 的 GIS 资源 (例如 地 图 和 globe) 称 为 服务 。ArcGIS Server 
站 点 的 用 途 是 接收 对 服务 的 请 求 ,执行 请 求 , 然 后 将 结果 发 回 到 需要 这 些 服务 的 客户 端 应 用 
程序 。GIS 服务 器 提供 了 一 组 用 于 管理 服务 的 工具 ; 例如 ,你 可 以 使 用 ArcGIS Server 管理 
器 应 用 程序 来 添加 和 移 除 服务 。 

T fit ArcGIS Server 站 点 的 组 成 十 分 有 用 ( 见 图 5. 1-1) ,因为 这 样 便 可 以 构建 一 个 能 够 
有 效 运行 GIS 服务 并 满足 应 用 需要 的 站 点 。 下 面 对 构 成 ArcGIS Server 站 点 的 各 个 组 件 进 


行 介绍 。 
网 页 、 dg [^] 
agg 
发 布 服务 


网 络 服务 器 
网 络 适 配器 


GIS 服 务 器 


ArcGIS 桌 面 用 户 
连接 到 F. 
ArcGIS Server qE L 
Manager 
GIS 管 理 员 


全 全 数据 服务 器 


图 5.1-1 ArcGIS for Server 网 络 架构 


1. ArcGIS Server 站 点 组 件 

以 下 组 件 构 成 了 ArcGIS Server 站 点 。 

1) GIS 服务 器 

GIS 服务 器 用 于 执行 对 Web 服务 的 请 求 。 它 可 以 绘制 地 图 ,运行 工具 ,查询 数据 ,以 及 
执行 能 够 通过 服务 执行 的 任何 其 他 操作 。GIS 服务 器 可 由 一 台 计 算 机 或 多 台 一 起 工作 的 计 
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算 机 构成 。 这 些 计 算 机 都 具有 访问 相同 数据 和 配置 信息 的 权限 ,因此 ,你 能 够 根据 需要 轻松 
地 增加 或 减少 参与 计算 机 的 数量 。 

GIS 服务 器 通过 普通 的 Web 协议 HTTP 公开 服务 。 安 装 GIS 服务 器 后 , 即 会 获得 一 
组 可 以 在 应 用 程序 中 使 用 的 Web 服务 。 作 为 对 GIS 服务 器 的 补充 ,可 以 使 用 企业 级 Web 
服务 器 获得 更 多 功能 ,例如 托管 Web 应 用 程序 的 功能 。 

GIS 服务 器 可 按 组 ( 称 为 集群 ) 进 行 组 织 。 按 照 服 务 器 管理 员 的 配置 ,每 个 集群 都 运行 
一 个 专门 的 服务 子 集 。 例 如 ,你 可 以 创建 一 个 集群 运行 所 有 地 图 服务 ,然后 创建 服务 器 的 另 
一 个 集群 (可 能 具有 更 高 的 处 理 能 力 ) 来 运行 地 理 处 理 服务 。 

2) Web Adaptor 

要 将 GIS 服务 器 与 现 有 的 企业 级 web 服务 器 相 集 成 ,可 以 安装 ArcGIS Web Adaptor。 
Web 适配器 通过 普通 URL( 通 过 你 选择 的 端口 和 网 站 名 称 ) 接 收 web 服务 请 求 并 将 这 些 请 
求 发 送 到 站 点 上 的 各 个 GIS 服务 器 计算 机 。 

还 可 以 使 用 其 他 类 型 的 “Web 网关? 技术 (例如 HTTP 负载 平衡 器 、 网 络 路 由 器 或 第 三 
方 负载 平衡 软件 ) 公 开 站 点 。 在 某 些 情况 下 ,可 能 适合 将 Web Adaptor 与 现 有 负载 平衡 解 
决 方案 结合 使 用 。 

3) Web 服务 器 

Web 服务 器 可 以 托管 Web 应 用 程序 ,并 为 ArcGIS Server 站 点 提供 可 选 的 安全 和 
负载 平衡 。 如 果 只 需要 简单 地 托管 GIS 服务 , 则 可 使 用 安装 ArcGIS Server 后 创建 的 
站 点 。 

如 果 不 只 是 简单 地 托管 服务 ,或 者 需要 使 用 你 所 在 组 织 的 现 有 Web 服务 器 , 则 可 安装 
Web Adaptor。 使 用 Web Adaptor 可 以 将 ArcGIS Server 站 点 与 IIS, WebSphere, WebLogic 以 
及 其 他 Web 服务 器 集成 在 一 起 。 

4) 数据 服务 器 

你 可 以 直接 将 数据 放置 到 每 个 GIS 服务 器 上 ,也 可 从 中 央 数 据 资 料 档案 库 ( 例 如 共享 
的 网 络 文件 夹 或 ArcSDE 地 理 数 据 库 ) 访 问 该 数据 。 无 论 选 择 哪 一 种 方法 ,该 数据 都 包含 以 
服务 形式 发 布 到 GIS 服务 器 上 的 所 有 GIS 资源 。 这 些 资 源 可 以 是 地 图 .globe、 定 位 器 .地 理 
数据 库 等 。 

2. ARAH 

在 没有 人 创作 数据 、 维 护 服 务 和 使 用 服务 的 情况 下 ,上 述 所 有 软件 组 件 都 将 毫 无 用 处 。 
ArcGIS Server 站 点 的 展开 视图 中 包含 内 容 创 作者 、 服 务 器 管理 员 、 应 用 程序 开发 人 员 以 及 
使 用 GIS 服务 的 应 用 程序 的 终端 用 户 。 

1) ArcGIS Server 站 点 管理 员 

ArcGIS Server 站 点 需要 一 个 人 来 安装 软件 ,配置 Web 应 用 程序 以 及 调整 站 点 以 获取 
最 佳 性 能 。ArcGIS Server 站 点 管理 员 可 以 使 用 ArcGIS for Desktop 或 ArcGIS Server 管 
理 器 来 管理 站 点 。 管 理 员 可 以 寻求 开发 人 员 的 帮助 或 自己 学 习 脚 本 技巧 ,从 而 通过 ArcGIS 
REST API 自动 执行 管理 任务 。 
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2) ArcGIS for Desktop 内 容 创作 者 和 发 布 者 

ArcGIS for Desktop 内 容 创 作者 使 用 ArcMap, ArcCatalog 和 ArcGlobe 等 应 用 程序 来 
创建 要 发 布 到 站 点 的 GIS 资源 (例如 地 图 .Globe 和 地 理 数 据 库 ) 。 在 将 资源 发 布 到 服务 器 
的 过 程 中 ,这 些 应 用 程序 也 可 以 起 到 辅助 作用 。 

3) 应 用 程序 开发 人 员 

应 用 程序 开发 人 员 从 ArcGIS Server 站 点 获取 服务 ,然后 通过 专业 应 用 程序 使 Web 用 
P! ,移动 用 户 和 桌面 用 户 能 够 轻松 使 用 这 些 服务 。 要 成 为 一 名 开发 人 员 ,并 不 需要 掌握 高 级 
的 编程 技巧 。 使 用 预 配置 的 查看 器 模板 、 微 件 和 示例 即 可 创建 外 形 美观 且 可 执行 大 多 数 常 
见地 图 导航 和 查询 功能 的 Web 应 用 程序 。 经 验 丰 富 的 开发 人 员 可 以 选择 各 种 API, 包 括 可 
通过 服务 器 对 象 扩 展 获得 的 ArcObjects 的 功能 。 

4) 客户 端 应 用 程序 用 户 

Web, 移动 和 桌面 应 用 程序 都 可 连接 到 服务 。 这 些 应 用 程序 的 终端 用 户 依靠 ArcGIS 
Server 站 点 来 获得 GIS 数据 或 实现 分 析 ; 但 是 ,他 们 可 能 不 知道 有 关 该 站 点 的 详细 信息 或 
者 不 知道 可 获得 哪些 服务 。 当 规划 部 署 的 规模 和 范围 时 ,全 面 了 解 访问 ArcGIS Server 站 
点 的 终端 用 户 数 以 及 他 们 对 该 站 点 的 使 用 模式 很 有 价值 。 

5) 其 他 人 员 

其 他 很 多 人 员 可 能 会 使 用 或 直接 影响 ArcGIS Server 站 点 。 这 些 人 员 包 括 协调 站 点 设 
置 和 架构 的 IT 管理 员 .设立 站 点 要 求 的 GIS 管理 人 员 ,以 及 创建 数据 的 GIS 技术 人 员 。 尽 
管 这 些 个 人 可 能 不 会 每 天 都 使 用 站 点 ,但 可 能 需要 对 他 们 进行 相应 的 培训 ,让 他 们 了 解 有 关 
ArcGIS Server 站 点 的 基础 知识 以 及 此 帮助 系统 中 包含 的 最 佳 实践 。 


5.1.3 ArcGIS for Server 中 包含 的 内 容 


作为 基于 服务 器 的 GIS 的 组 成 部 分 ,ArcGIS for Server 中 包含 以 下 内 容 。 

1. Web 服务 发 布 

只 要 安装 了 ArcGIS for Server, 即 可 通过 你 的 GIS 资源 (如 地 图 、 影 像 和 地 理 处 理 模 
型 ) 发 布 Web 服务 。 你 还 会 获得 一 些 预先 配置 的 服务 。 

你 的 ArcGIS Server web 服务 通过 REST 和 SOAP 显示 ,并 可 由 Esri 和 非 Esri 客户 端 
进行 调用 。 高 级 开发 人 员 可 使 用 服务 器 对 象 扩 展 来 扩展 开 箱 即 用 的 服务 。 


2. 预 配置 服务 
ArcGIS Server 提供 了 各 种 预 配置 服务 ,可 帮助 你 执行 各 种 常见 任务 。 
1) 缓存 控制 器 


CachingControllers 服务 帮助 处 理 地 图 .影像 和 Globe 缓存 作业 。 你 所 允许 的 此 服务 的 
最 大 实例 数 即 表示 你 可 以 同时 运行 的 最 大 缓存 作业 数 。 

CachingControllers 服务 与 CachingTools 服务 协同 工作 。 二 者 必须 同时 运行 才能 构建 
缓存 。 并 且 二 者 必须 在 同一 个 集群 上 运行 。 

2) 缓存 工具 

缓存 过 程 中 无 需 大量 使 用 地 图 服务 .Globe 服务 和 影像 服务 ,工作 负荷 已 转移 到 名 为 
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CachingTools 的 地 理 处 理 服务 ,因而 得 到 了 减轻 。 在 你 创建 ArcGIS Server 站 点 时 会 在 
System 文件 夹 中 预先 配置 此 服务 。 可 以 将 CachingTools 服务 限制 为 在 已 定义 的 计算 机 集 
群 内 运行 ,从 而 释放 站 点 中 的 其 他 计算 机 以 快速 响应 服务 请 求 。 

默认 情况 下 会 启动 “缓存 工具 ”(CachingTools) 服 务 。 应 使 此 服务 保持 运行 ,以 使 其 可 
以 响应 缓存 请 求 。 如 果 服 务 停止 或 不 可 用 ,缓存 请 求 将 失败 。 不 能 删除 CachingTools 服 
务 ,并且 必须 保持 其 执行 模式 为 异步 。 

CachingTools 服务 与 CachingControllers 服务 协同 工作 。 二 者 必须 同时 运行 才能 构建 
缓存 。 并 且 二 者 必须 在 同一 个 集群 上 运行 。 

3) 几何 服务 

预 配置 几何 服务 可 用 于 执行 各 种 几何 计算 ,如 缓冲 区 ,简化 .面积 和 长 度 计算 以 及 投影 。 
还 包括 用 于 Web 编辑 的 功能 。 如 果 正 在 使 用 ArcGIS Viewer for Flex, ArcGIS Viewer for 
Silverlight 或 ArcGIS web API 构建 Web 应 用 程序 , 则 可 通过 几何 服务 的 REST 端点 引用 
该 几何 服务 ,以 在 Web 应 用 程序 中 执行 几何 计算 和 编辑 。 该 几何 服务 在 Utilities 文件 夹 中 
进行 预先 配置 并 默认 停止 。 必 须 显 式 启动 该 服务 ,然后 才能 使 用 它 。 

4) 打印 工具 

PrintingTools 是 一 个 地 理 处 理 服 务 ,部 署 此 服务 可 帮助 你 打印 Web 地 图 。 例 如 ,使 用 
ArcGIS Web API 开 发 Web 应 用 程序 时 ,可 以 调用 “打印 工具 ”(PrintingTools) 服 务 , 最 后 
可 从 地 图 服务 获取 高 质量 的 可 打印 图 像 。 

PrintingTools 服务 已 在 Utilities 文件 夹 中 预先 配置 。 该 服务 默认 停止 。 必 须 显 式 启 
动 PrintingTools 服务 ,然后 才能 使 用 它 。 

5) Afi T.H. 

使 用 管理 器 或 ArcGIS for Desktop 发 布 服 务 时 , ArcGIS Server 使 用 名 为 Publishing 
Tools 的 地 理 处 理 服 务 上 传 服务 定义 文件 ,在 服务 器 上 对 文件 进行 解 包 并 部 署 此 文件 以 将 
其 用 作 服 务 。 

PublishingTools 服务 在 System 文件 夹 中 进行 预先 配置 并 默认 启动 。 应 使 此 服务 保持 
运行 ,以 使 其 可 以 响应 发 布 请 求 。 如 果 PublishingTools 服务 停止 或 不 可 用 ,服务 发 布 将 失 
败 。 不 可 删除 PublishingTools 服务 。 

6) 报告 工具 

名 为 “报告 工具 ”(ReportingTools) 的 地 理 处 理 服务 用 于 生成 地 图 和 影像 服务 缓存 作业 
的 状态 报告 。 

该 服务 在 System 文件 夹 中 进行 预先 配置 并 默认 启动 。 应 使 此 服务 保持 运行 ,以 使 其 
可 报告 缓存 作业 的 状态 。 如 果 ReportingTools 服务 停止 或 不 可 用 ,你 将 无 法 查看 缓存 作业 
的 状态 。 不 可 删除 ReportingTools 服务 。 

7) 同步 工具 

你 可 对 要 素 服务 启用 同步 功能 .这 样 客户 端 便 可 下 载 数 据 的 本 地 副本 以 便 在 离线 时 使 
用 ,并 且 在 客户 端 恢复 在 线 时 ,可 在 客户 端 和 要 素 服 务 之 间 进 行 同步 更 改 。 可 同步 或 异步 进 
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行 这 些 下 载 操作 和 同步 操作 。 异 步 运 行 同步 操作 时 ,可 使 用 SyncTools 服务 。 

SyncTools 地 理 处 理 服务 在 ArcGIS Server 系统 文件 夹 中 进行 预先 配置 并 默认 启动 。 
如 已 启用 同步 要 素 服务 , 则 应 使 此 服务 保持 运行 状态 。 如 果 SyncTools 地 理 处 理 服务 停止 
或 不 可 用 , 则 异步 运行 时 ,同步 操作 会 失败 。 无 法 删除 SyncTools 服务 。 

8) SampleWorldCities 地 图 服务 

SampleWorldCities 地 图 服务 使 你 能 够 预览 ArcGIS Server 的 功能 。 可 在 ArcGIS 
Server Manager 中 单 击 此 地 图 服务 的 缩 略 图 ,直接 在 Web 应 用 程序 中 显示 该 服务 。 也 可 以 
在 ArcGIS 客户 端 中 使 用 此 样本 ,就 像 使 用 任何 其 他 地 图 服务 一 样 。 

SampleWorldCities 地 图 服务 在 Site( 根 ) 文 件 夹 中 进行 预先 配置 并 默认 启动 。 如 果 不 
再 需要 该 服务 ,可 将 其 从 ArcGIS Server 站 点 中 删除 。 

9) 搜索 服务 

预先 配置 的 搜索 服务 可 创建 你 所 在 组 织 的 GIS 内 容 的 可 搜索 索引 ,以 供 在 本 地 网 络 中 
使 用 。 例 如 ,可 允许 搜索 服务 为 你 的 GIS 数据 文件 夹 创建 索引 ,然后 允许 组 织 中 的 ArcMap 
用 户 在 搜索 数据 时 引用 该 服务 。 该 搜索 服务 在 Utilities 文件 夹 中 进行 预先 配置 并 默认 停 
止 。 必 须 显 式 启动 该 服务 ,然后 才能 使 用 它 。 

3. ArcGIS Server Manager 

ArcGIS Server Manager 是 用 于 管理 GIS 服务 器 的 应 用 程序 。 通 过 管理 器 ,你 可 以 添 
加 和 移 除 服 务 , 调整 和 保护 服务 以 及 在 文件 夹 中 组 织 服务 。 此 外 ,管理 器 还 允许 你 在 
ArcGIS Server 站 点 中 配置 计算 机 和 目录 ,以 及 使 用 日 志 对 GIS 服务 器 进行 故障 排除 。 

4. ArcGIS Web Adaptor 

ArcGIS Web Adaptor 是 可 选 安装 程序 ,安装 该 程序 后 ,可 以 将 ArcGIS Server 与 你 自 
己 的 Web 服务 器 配合 使 用 。 对 于 简单 的 开发 和 测试 情景 ,ArcGIS Server 会 通过 HTTP 显 
示 Web 服务 ,但 如 果 要 自 定义 站 点 的 URL 和 端口 号 ,或 在 Web 层 配置 安全 性 策略 , 则 应 安 
装 Web Adaptor。 

5. ArcGIS Server 服务 目录 

开发 Web 应 用 程序 时 ,有 时 需要 提供 服务 器 上 某 些 资源 的 URL. ArcGIS Server 服务 
目录 是 一 个 工具 , 它 使 用 表述 性 状态 转移 (REST) 技 术 帮 助 你 发 现 服务 信息 以 及 可 在 开发 
时 使 用 的 相应 URL 信息 。 

服务 目录 还 特别 适用 于 通过 浏览 或 搜索 来 发 现 服务 器 。 例 如 ,通过 服务 目录 ,服务 器 的 
用 户 可 以 访问 所 有 可 用 服务 的 地 理 轮廓 线 。 用 户 还 可 以 在 Web Ùi w a, ArcMap, ArcGIS 
Explorer Desktop 和 Google 地 球 中 检索 与 服务 有 关 的 服务 级 元 数据 并 预览 这 些 数据 。 可 
通过 已 安装 的 快捷 方式 或 在 web 浏览 器 中 输入 http://gisserver. domain. com: 6080/ 
arcgis/rest/services 来 打开 “服务 目录 ”。 

6. 用 于 管理 服务 器 的 REST API 和 命令 行 实用 程序 

使 用 ArcGIS REST API 可 为 常见 服务 器 管理 任务 (例如 向 站 点 添加 计算 机 ,发 布 服 
务 ,添加 权限 等 ) 编 写 脚本 。ArcGIS Server 管理 员 目 录 提 供 了 对 此 API 的 简单 交互 式 访 
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问 。 这 对 于 了 解 命令 的 层次 结构 并 构造 要 放 和 脚本 中 的 HTTP 请 求 非常 有 用 。 理 解 此 
API 后 ,就 可 以 利用 可 发 出 HTTP 请 求 的 任何 工具 或 编程 语言 全 面 管 理 ArcGIS Server 

可 通过 输入 http://gisserver. domain. com: 6080/arcgis/admin 打开 “管理 员 目 录 ”。 
ArcGIS Server 还 会 安装 一 系列 可 用 于 批 处 理 文件 的 命令 行 实用 程序 。 使 用 这 些 实用 程 
序 ,无 需 为 最 常见 的 管理 操作 编写 任何 代码 。 

7. 配置 ArcGIS Server 账户 实用 程序 

“配置 ArcGIS Server 账户 ?实用 程序 是 一 个 包含 在 ArcGIS for Server 安装 程序 中 的 小 
型 应 用 程序 ,可 用 于 快速 重新 配置 ArcGIS Server 账户 。 如 果 遇 到 需要 修改 账户 的 情况 ( 例 
如 更 改 其 密码 ) ,可 以 从 ArcGIS Server 安装 位 置 启动 该 实用 程序 。 

8. 可 配置 Web 应 用 程序 

ArcGIS Viewer for Flex 和 ArcGIS Viewer for Silverlight 可 免费 下 载 ,无 需 任 何 编程 
即 可 创建 GIS Web 应 用 程序 。 查 看 器 支持 各 种 Esri 和 非 Esri 的 Web 服务 类 型 ,甚至 可 以 
嵌入 你 使 用 ArcGIS. com 地 图 查看 器 创建 的 地 图 和 保存 到 ArcGIS Online 上 的 地 图 。 查 看 
器 支持 打印 、 地 理 处 理 `Web 编辑 等 操作 。 

9. Web API 

Esri 提供 应 用 程序 编程 接口 (APD 来 帮助 你 构建 采用 ArcGIS Server 站 点 的 Web 和 移 
动 应 用 程序 。ArcGIS API for JavaScript, ArcGIS API for Flex 和 ArcGIS API for 
Silverlight 具有 完整 的 帮助 文档 ,其 中 包含 概念 帮助 .示例 和 API 参考 主题 ,由 于 它们 的 功 
能 类 似 , 因 此 你 可 以 选用 你 最 喜欢 的 编程 平台 。 

1) ArcGIS API for JavaScript 

ArcGIS API for JavaScript 允许 你 使 用 HTML 和 JavaScript 构建 交互 式 Web GIS 应 
用 程序 。 所 有 代码 都 在 浏览 器 中 运行 ,无 论 是 客户 端 还 是 Web 服务 器 都 不 需要 安装 任何 
GIS 软件 。 使 用 纯 JavaScript 的 优势 在 于 , 它 不 要 求 用 户 具 有 任何 浏览 器 插件 。 

2) ArcGIS API for Flex 

ArcGIS API for Flex 使 你 能 够 创建 具有 简洁 直观 、 响 应 迅速 的 用 户 界面 的 Web 应 用 
程序 。ArcGIS API for Flex 充分 利用 了 ArcGIS Server 服务 强大 的 制图 、 地 理 编码 和 地 理 
处 理 功 能 。 

3) ArcGIS API for Silverlight 

ArcGIS API for Silverlight 提供 了 一 种 跨 浏览 器 、 跨 平台 的 开发 环境 ,用 于 构建 和 交付 
交互 式 Web 应 用 程序 。 利 用 ArcGIS Server 服务 (如 地 图 、 定 位 器 和 地 理 处 理 模型 ) 及 
Microsoft Silverlight 组 件 ( 如 格 网 、 树 视图 和 图 表 ) ,可 以 创建 极 具 表现 力 的 交互 式 Web 应 
用 程序 。 

10. ArcGIS for SharePoint 

ArcGIS for SharePoint 利用 Microsoft SharePoint 框架 来 提供 可 配置 的 制图 组 件 ,以 供 
Microsoft SharePoint 站 点 使 用 。 该 应 用 程序 使 用 ArcGIS Server 服务 、ArcGIS Online 服 
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务 和 Microsoft Office 文档 库 。 

11. 移动 API 

移动 设备 (例如 Windows 智能 手机 .Apple iOS 设备 .Android E f& , Tablet PC 和 车 载 
系统 ) 可 以 访问 由 ArcGIS Server 托管 的 GIS 服务 。 这 些 应 用 程序 可 用 于 查看 地 图 ,搜索 位 
置 以 及 在 野外 进行 GIS 分 析 。Esri 开发 了 多 种 API, 简 化 了 对 使 用 GIS 服务 的 移动 应 用 程 
序 的 构建 过 程 。 

12. 扩展 模块 

ArcGIS for Server 的 可 选 扩展 模块 允许 你 向 系统 添加 功能 。 许 多 情况 下 ,这些 扩展 模 
块 具有 独立 的 Desktop 和 Server 产品 ; Server 扩展 模块 允许 通过 ArcGIS Server 服务 发 布 
功能 。 可 用 的 扩展 模块 包括 : 

1) ArcGIS 3D Analyst extension 

ArcGIS 3D Analyst extension 中 包含 一 组 用 于 创建 和 分 析 表 面 的 3D GIS 功能 。 这 些 
功能 包括 坡度 、 坡 向 和 山体 阴影 分 析 。 可 以 通过 地 理 处 理 服务 在 服务 器 上 调用 这 些 
功能 。 

2) ArcGIS Data Interoperability extension for Desktop 

ArcGIS Data Interoperability extension for Desktop 允许 你 在 桌面 上 创作 支持 非 本 地 数据 
源 的 地 图 和 地 理 处 理 任务 ,然后 将 其 发 布 到 ArcGIS Server。 可 使 用 Data Interoperability 扩 
展 模块 的 “直接 读 取 ”功能 和 * 互 操作 连接 ”功能 来 发 布 包含 非 本 地 数据 源 的 地 图 。 还 可 发 布 
包含 转换 功能 (例如 快速 导入、 快速 导出 和 自 定义 空间 ETL 工具 ) 的 地 理 处 理 任务 。 

3) ArcGIS Data Reviewer extension for Server 

使 用 ArcGIS Data Reviewer for Desktop 扩展 模块 实施 的 数据 质量 工作 流 可 作为 Web 
服务 使 用 ,并 可 通过 使 用 ArcGIS Data Reviewer for Server 扩展 模块 的 Web 或 移动 客户 端 
应 用 程序 进行 访问 。 例 如 ,可 发 布 多 种 类 型 的 Web 服务 以 支持 手动 和 自动 数据 验证 ,数据 
质量 报告 和 错误 生命 周期 管理 。 

4) ArcGIS Geostatistical Analyst extension 

Geostatistical Analyst 扩展 模块 用 于 将 ArcGIS for Desktop 中 生成 的 高 级 统计 分 析 结 
果 转 换 为 Web 服务 。 这 些 Web 服务 提供 所 需 的 工具 有 助 于 生成 具 统计 学 意义 的 表面 ,以 
及 结合 其 他 ArcGIS 扩展 模块 (如 ArcGIS Spatial Analyst extension fil 3D Analyst) 在 Web 
上 进行 GIS 建 模 和 可 视 化 时 使 用 这 些 表面 。 

5) ArcGIS Image extension 

ArcGIS Image extension 可 用 于 处 理 大 量 栅 格 数据 并 在 整个 企业 内 使 用 这 些 数据 。 影 
像 服务 可 以 包含 具有 不 同 格式 、 投 影 和 分 辨 率 的 数据 集 。 影 像 扩展 模块 的 一 个 主要 特点 是 
它 支 持原 生 格式 的 影像 数据 而 不 需要 创建 特殊 的 格式 。 

6) ArcGIS Network Analyst extension 

ArcGIS Network Analyst extension 可 提供 基于 网 络 的 空间 分 析 功 能 ,包括 路 线 \ 行 进 
方向 .最 近 设 施 点 和 服务 区 域 分 析 。 开 发 人 员 可 以 使 用 该 扩展 模块 构建 和 部 署 自 定义 网 络 
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应 用 程序 。 

7) ArcGIS Schematics extension 

ArcGIS Schematics extension 允许 你 将 逻辑 示意 图 内 容 发 布 到 ArcGIS Server, 然 后 通 
过 使 用 ArcGIS web API 创建 的 Web 应 用 程序 显示 该 内 容 。 

8) ArcGIS Spatial Analyst extension 

ArcGIS Spatial Analyst extension 用 于 将 高 级 空间 数据 集 和 模型 发 布 到 ArcGIS 
Server。 可 使 用 Spatial Analyst 获取 与 栅 格 数据 有 关 的 信息 ,确定 空间 关系 ,查找 合适 的 位 
置 , 计 算 行 程 成 本 表面 以 及 在 Web 上 执行 各 种 其 他 类 型 的 栅 格 地 理 处 理 操作 。 

9) ArcGIS Workflow Manager for Server 

ArcGIS Workflow Manager for Server 用 于 将 有 关 GIS 项 目 工 作 流 的 信息 发 布 为 Web 
服务 。 启 用 Workflow Manager 扩展 模块 后 ,Internet 或 Intranet 用 户 可 在 支持 的 客户 端 
(例如 Web 浏览 器 和 移动 应 用 程序 ) 中 访问 工作 流 。 


5.1.4 ArcGIS for Server 安装 


操作 系统 需求 : 操作 系统 必须 是 64 位 。 

硬件 需求 : 对 于 部 署 环境 ,最 小 内 存 必 须 是 4GB。 这 个 要 求 是 基于 以 下 环境 的 典型 
BH: 

真正 部 署 时 ,最 低 硬 件 需求 并 不 能 具体 化 ,因为 要 根据 用 户 和 需求 的 不 同 进行 调整 。 硬 
件 需 求 必 须 考虑 用 户 对 性 能 和 可 扩展 性 的 需求 。 

笔者 所 用 的 系统 环境 为 64 位 Windows 7 操作 系统 ,安装 镜像 为 官方 版 的 
ArcGISforServer 10.2。 具 体 安装 步骤 如 下 : 

(1) 用 虚拟 光驱 加 载 下 载 好 的 官方 安装 镜像 ,或 者 将 官方 下 载 的 镜像 文件 解压 缩 到 本 
地 磁盘 ,双击 ESRI. exe 开始 安装 。 

(2) 弹出 安装 界面 ,在 安装 之 前 检测 本 地 是 否 已 经 安装 了 其 他 版 本 的 ArcGISServer, 运 
行 RunUtility 可 得 到 检测 结果 ,然后 单 击 "*ArcGISforServer” 右 边 的 "setup” 按 钮 。 

(3) 在 弹出 的 窗口 中 单 击 Next 按钮 。 

(4) 勾 选 Iaccept the licenseagreement 选项 ,这 时 Next 按钮 变 为 可 单 击 状态 , 单 击 
Next 按钮 。 

(5) 修改 安装 路 径 , 考 虑 到 安装 好 之 后 的 应 用 程序 占用 磁盘 空间 较 大 ,建议 修改 路 径 安 
装 到 非 系统 盘 , 单 击 Change 按钮 ,选择 好 安装 路 径 之 后 单 击 “ 确 定 ” 按 钮 ,再 回 到 之 前 的 界 
面 , 单 击 Next 按钮 。 

(6) 选择 Python 的 安装 路 径 , 建 议 使 用 默认 的 路 径 , 单 击 Next 按钮 继续 。 

(7) 创建 Server 账户 和 密码 ,此 账户 和 密码 是 操作 系统 账户 和 密码 ,用 于 每 次 登录 操作 
系统 时 选择 的 账户 。 如 果 之 前 安装 的 时 候 创建 过 并 且 电 脑 中 有 账户 配置 文件 ,可 选择 
Ihavaaconfiguration 选项 , 单 击 右 边 的 文件 夹 图 标 ,弹出 对 话 框 ,浏览 配置 文件 的 目录 单 击 
即 可 确定 ,以 创建 新 账户 为 例 , 创 建 好 账户 和 密码 之 后 单 击 Next 按钮 。 
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提示 。 Server 账户 的 作用 : 启动 和 停止 支撑 GIS 服务 器 和 服务 的 一 系列 进程 ; Oik PUR 
务 器 提供 的 数据 ,并 根据 需要 进行 编辑 ; (3)ArcGISServer 目录 中 读 写 文件 ,如 地 图 组 
存 时 ,该 账户 缓存 切片 存 到 cache ARF; 向 安装 路 径 和 系统 临时 目录 写 文件 ,如 
生成 日 志文 件 用 来 查找 问题 ,默认 的 账户 名 是 arcgis。 


(8) 弹出 导出 服务 配置 文件 ,根据 需求 灵活 选择 是 否 导出 服务 配置 文件 ,确定 之 后 单 击 
Next 按钮 继续 。 

(9) 弹出 正式 开始 安装 的 界面 , 单 击 Install 按钮 继续 。 

(10) 安装 持续 的 时 间 为 几 分 钟 到 几 十 分 钟 不 等 ,与 电脑 硬件 配置 有 关 , 耐 心 等 待 安装 结束 。 

(11) 单 击 Finish 按钮 完成 安装 ,但 接 下 来 还 需要 对 应 用 进行 授权 ,此 时 会 弹出 授权 向 
导 窗 口 ,以 第 三 项 作为 示范 , 单 击 “Browse” 按 钮 ,弹出 文件 浏览 对 话 框 ,选择 授权 文件 所 在 
目录 , 单 击 “确定 ”按钮 ,之 后 再 单 击 Next 按钮 。 

(12) 完成 授权 ,弹出 显示 成 功 授权 使 用 特性 的 界面 , 单 击 * 完 成 ?按钮 即 可 完成 授权 。 

(13) 创建 站 点 ,安装 完成 之 后 ,会 自动 弹出 Manager 页 面 ,这 里 我 们 选择 创建 站 点 ; 加 
入 现 有 站 点 是 用 来 搭建 集群 用 的 , 单 击 “ 创 建新 站 点 ”按钮 。 

(14) 弹出 创建 站 点 管理 员 账 户 , 此 账户 是 用 来 管理 站 点 中 的 各 种 服务 形式 的 GIS VE 
源 , 和 之 前 创建 的 操作 系统 账户 有 区 别 ; 设置 完成 之 后 单 击 Next 按钮 。 

(15) 指定 根 服务 器 目录 和 配置 存储 ,使 用 默认 给 定 路 径 即 可 , 单 击 Next 按钮 。 

(16) 弹出 配置 摘要 界面 ,确认 无 需 修 改 配置 之 后 , 单 击 “ 完 成 按钮 即 可 。 耐 心 等 待 创 

(17) 登录 创建 的 站 点 ,输入 之 前 创建 的 站 点 账户 名 和 密码 , 即 可 登录 站 点 后 台 管理 界 
面 ,在 这 里 可 以 为 发 布 和 管理 各 种 GIS 资源 ,如 图 5. 1-2 BER o 


图 5.1-2 后 台 管 理 


成 功 登 录 管理 界面 ,安装 成 功 。 
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5.2 地 图 制作 


5.2.1 Desktop 安装 教程 


安装 之 前 需要 下 载 安 装 文件 ,可 以 从 ArcGIS 的 官网 (http://www. arcgis. com/ 
features/) 下 载 安 装 包 , 由 于 官网 需要 注册 之 后 才能 使 用 ESRI 公司 的 产品 ,如 果 觉 得 注册 
太 麻 烦 , 也 可 以 去 互联 网 上 搜索 安装 包 资 源 。 官 方 完整 的 ArcGISDesktop 10. 2 安装 包 大 约 
有 4GB, 为 .iso 格式 的 镜像 文件 。 本 节 以 官方 完整 的 ArcGISDesktop 10. 2 安装 包 为 例 , 讲 
解 整个 安装 过 程 。 安 装 环境 为 64 位 Windows 7 操作 系统 ,详细 安装 步骤 如 下 : 

CD 找到 已 经 下 载 好 的 安装 文件 ,用 虚拟 光驱 软件 加 载 安 装 包 镜 像 文件 ,如 图 5. 2-1 
所 示 。 


©% (ELE [e re A Ei | 


2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 618 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/7/19 6:18 
2013/6/7 5:24 1,969 KB 
2013/7/18 6:40 10 KB 
2009/12/5 1:52 1KB 
2013/7/16 1413 5,736 KB 
2012/1/6 321 319 KB 
2013/7/17 739 44KB 
2013/1/24 635 2KB 


图 5. 2-1 安装 包 文件 结构 


(2) 双击 ESRI. exe 文件 ,开始 安装 ,此 时 会 弹出 ArcGIS Desktop 10. 2 的 安装 导航 界 
面 ,如 图 5. 2-2 所 示 。 

(3) 单 击 ArcGIS for Desktop 右边 的 Setup 即 可 启动 安装 程序 ,此 时 会 弹出 ArcGIS 
10. 2 for Desktop 安装 程序 界面 ,如 图 5. 2-3 所 示 , 单 击 Next 按钮 继续 。 
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ArcGIS for Desktop 


10.2 


Quick Start Guide Readme 
Uninstall ArcGIS Software prior to ArcGIS 10.1 
Run utility Readme 


ArcGIS for Desktop 

ArcGIS for Desktop Setup Install Guide 
ArcGIS for Desktop Background Geoprocessing (64-bit) Setup 

ArcSDE for Microsoft SQL Server 2008 R2 Express (Personal) Setup Install Guide 
ArcGIS Data Interoperability for Desktop Setup 

ArcGIS Data Reviewer for Desktop. Setup Install Guide. 
ArcGIS Workflow Manager for Desktop Setup Install Guide 


ArcGIS License Manager - REQUIRED UPDATE FOR ARCGIS DESKTOP AND ENGINE USERS 


ArcGIS License Manager Quick Start Guide Setup Reference Guide 
ArcObjects SDKs 

ArcObjects SDK for Microsoft .NET Framework ‘Setup 

ArcObjects SDK for Java Setup 


The Solaris and Linur setups For the License Manager are included on the media; see the Quick Start and License Manager 
Reference Guide For nore information 


图 5.2-2 ArcGIS for Desktop 安装 


Welcome to the ArcGIS 10.2 for Desktop Setup 
program 

It is strongly recommended that you exit all Windows programs 
before running this setup program. 


Click Cancel to quit setup and dose any programs you have running. 
Click Next to continue the installation. 


WARNING: This program is protected by copyright law and 
international treaties. 


Unauthorized reproduction or distribution of this program, or any 
Portion of it, may result in severe civil and criminal penalties, and will 
be proseauted to the maximum extent possible under law. 


Ce) ee 


图 5.2-3 ArcGIS 10. 2 for Desktop 安装 程序 向 导 


(4) 接受 许可 协议 ,建议 仔细 阅读 官方 的 许可 协议 ,以 免 将 来 发 生 法 律 纠纷 , 阅 
后 单 击 I accept the license agreement, 如 图 5. 2-4 所 示 ,然后 单 击 Next 按钮 。 


Browse ( 
3 


读 完 之 
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让 


mr] 


图 5. 2-4 许可 协议 对 话 框 


(5) 选择 安装 类 型 ,可 以 根据 需要 选择 ,对 于 初级 用 户 , 可 以 默认 选择 Complete( 完 整 安 
装 ) 类 型 ; 对 于 有 一 定 经 验 的 高 级 用 户 可 以 选择 Custom( 自 定义 ) 安 装 ,此 处 以 完整 安装 为 
例 进行 安装 示范 , 选 好 之 后 单 击 Next 按钮 ,如 图 5. 2-5 所 示 。 


Select Installation Type 
Select the desired installation type. 


Please selecta setup type. 
© Complete 


3 ~All application features, induding ArcGIS 10.2 for Desktop 
extensions, wil be installed. 


© custom 
Use this option to choose which application features you want 
installed and where they wil be installed. Recommended for 
advanced users. 


st Cm) 


图 5.2-5 选择 安装 类 型 对 话 框 


(6) 选择 将 安装 应 用 的 目的 文件 夹 , 安 装 程序 提供 的 路 径 为 系统 盘 的 应 用 程序 安装 路 
径 , 考 虑 到 系统 盘 空 间 会 随 着 使 用 时 间 的 增加 而 减少 ,建议 更 改 路 径 到 非 系统 盘 , 单 击 
Change 按钮 ,如 图 5. 2-6 所 示 ,更 改 好 路 径 之 后 单 击 Next 按钮 。 

(7) 安装 过 程 中 需要 附带 安装 Python 来 支持 ArcGIS 中 的 某 些 功能 ,建议 使 用 安装 程 
序 给 出 的 默认 路 径 , 单 击 Next 按钮 继续 ,如 图 5. 2-7 所 示 。 
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Destination Folder 
Selecta folder where the application wil be installed. 


Install ArcGIS 10.2 for Desktop to: 
D:\Program Files (x86) WrcGIS Desktop 10.2\ Eee 


图 5.2-6 更 改 安装 路 径 


Python Destination Folder 
Select a folder where Python will be installed. 


Python 2.7.3, Numerical Python (NumPy) 1.6. 1 and Matplotib 1. 1. 1 are required to support 
t SIME GIC eects Ue: Itis recommended that they be installed by the ArcGIS 10.2 


Ec ee ee 1.6.1 ond Mate Ab Lin he 
following folder. To install nto a different folder, cick 


Python Folder 
CePython27\ 


Change... 


The Python 2.7.3 installation directory should not contain spaces. Python 2.7.3, Numerical 
Py Dumb) LE and attis Dd asd 98 7H of sonal da goce Greta 


Hep «Bk  ( Next>) [Cancel 


5.2-7 安装 Python 


(8) 开始 安装 ArcGIS. 如果 不 想 参 与 Esri 用 户 体 验 计 划 可 以 不 勾 选 Click here to 3€ 
项 ,准备 就 绪 后 单 击 Install 按钮 ,如 图 5. 2-8 所 示 。 

(9) 安装 过 程 持 续 时 间 的 长 短 与 计算 机 的 性 能 相关 ,计算 机 性 能 越 高 整个 过 程 持 续 的 
时 间 越 短 ,期 间 不 需要 其 他 操作 ,也 不 要 关闭 安装 窗口 ,否则 安装 过 程 将 中 止 。 

CLO) 耐心 等 待 安装 完成 ,安装 完成 之 后 单 击 “ 完 成 ”按钮 即 可 完成 安装 。 

(11) 安装 完成 后 会 弹出 一 个 管理 器 向 导 窗 口 , 根 据 自己 的 需求 选择 对 应 的 产品 ,要 获 
取 Esri 公司 的 使 用 授权 可 以 通过 官网 购买 或 者 免费 试用 。 

至 此 ,整个 ArcGISforDesktop 就 已 经 安装 完成 。 
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Ready to Install the Program 
The wizard is ready to begin installation. 


Click Install to begin the installation. 


If you want to review or change any of your installation settings, dick Back. Click Cancel to 
exit the wizard. 


Would you lie to anonymously participate in the design of future versions of ArcGIS? 
园 Ck here to participate in the Esri User Experience Improvement program. 
(Recommended) 


Learn more about Esri User Experience Improvement. 


Cos (ma Ce 


图 5.2-8 安装 界面 


5.2.2 地 图 矢量 化 过 程 


ArcScan 提供 了 一 些 工具 ,用 来 将 扫描 图 像 转换 为 矢量 要 素 图 层 。 将 栅 格 数据 转换 为 
矢量 要 素 的 过 程 称 为 矢量 化 。 矢 量化 可 通过 交互 追踪 栅 格 像 元 来 手动 执行 ,也 可 使 用 自动 
模式 执行 。 

交互 式 矢 量化 过 程 称 为 栅 格 追踪 ,这 需要 追踪 地 图 中 的 栅 格 像 元 来 创建 矢量 要 素 。 自 
动 矢 量化 过 程 称 为 自动 矢量 化 ,这 需要 根据 所 指定 的 设置 为 整个 栅 格 生成 要 素 。 

有 些 组 织 需 要 将 栅 格 图 像 转 换 为 基于 矢量 的 要 素 图 层 , 这 些 组 织 可 能 会 成 为 使 用 
ArcScan 扩展 模块 的 主要 用 户 。 由 于 大 量 的 地 理 信息 仍 以 硬 拷贝 地 图 的 形式 存在 ,因此 提 
供 一 种 工具 来 将 这 些 文档 集成 到 GIS 中 显得 至 关 重 要 。 这 些 遗 留 文档 可 以 从 工程 ,测量 及 
制图 专业 人 员 那 里 获得 。 与 传统 技术 (如 数字 化 技术 ) 相 比 , 扫 描 矢量 化 可 以 有 效 地 简化 这 
一 集成 过 程 。 

ArcScan 扩展 模块 还 提供 了 一 些 工 具 , 可 用 来 执行 简单 的 栅 格 编辑 以 准备 用 于 矢量 化 
的 栅 格 图 层 。 这 种 做 法 称 为 栅 格 预 处 理 , 可 帮助 你 排除 超出 矢量 化 项 目 范围 的 不 需要 的 栅 
格 元 素 。 

1. 扫描 矢量 化 入 门 

ArcScan 在 ArcMap 环境 下 运行 .并 且 依赖 于 自身 的 用 户 界 面 , 该 界面 支持 在 矢量 化 过 
程 中 使 用 的 工具 和 命令 。 与 其 他 ArcGIS 扩展 模块 一 样 ,必须 先 在 ArcMap 中 启用 ArcScan 
扩展 模块 ,之 后 才能 使 用 该 模块 。 此 外 ,必须 将 “扫描 矢量 化 ”工具 条 添加 到 你 的 地 图 ,才能 
访问 支持 矢量 化 工作 流 的 工具 和 命令 。 

由 于 扫描 矢量 化 要 在 编辑 环境 下 工作 ,因此 必须 启动 编辑 会 话 才 能 激活 此 工具 条 。 这 
意味 着 所 有 编辑 工具 和 命令 都 可 以 与 扫描 矢量 化 ”工具 和 命令 结合 使 用 。ArcScan 使 用 诸 
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如 捕捉 环境 以 及 目标 模板 和 图 层 等 编辑 设置 。 

扫描 矢量 化 可 以 对 ArcGIS 所 支持 的 任何 以 二 值 图 像 表 示 的 栅 格 数据 格式 进行 矢量 
化 。 这 就 要 求 你 使 用 两 种 唯一 的 颜色 来 对 栅 格 图 层 进行 符号 化 。 可 以 使 用 ArcMap 的 “ 唯 
一 值 ” 或 “分 类 ” 演 染 选项 来 将 栅 格 分 离 成 两 种 颜色 。 大 部 分 扫描 文档 通常 由 两 种 用 来 描绘 
前 景 和 背景 的 颜色 组 成 。 通 常 ,前 景 用 深 色 ( 如 黑色 ) 表 示 ,而 背景 用 浅 色 (如 白色 ) 表 示 。 但 
是 ,这 些 颜 色 可 以 颠倒 或 用 不 同 的 值 表示 。 只 要 两 种 颜色 具有 唯一 的 值 ,扫描 矢量 化 就 支持 
对 当前 前 景 栅 格 像 元 进行 矢量 化 。 

将 栅 格 数据 转换 为 矢量 要 素 的 过 程 依赖 于 用 户 定 义 的 设置 。 通 过 这 些 设 置 , 可 以 影响 
输出 矢量 要 素 的 几何 组 成 。 为 数据 确定 了 最 佳 矢 量化 设置 后 , 便 可 方便 地 保存 和 重复 使 用 
这 些 设 置 。 

2. 交互 式 矢量 化 ( 栅 格 追踪 ) 

需要 对 矢量 化 过 程 进行 更 多 的 控制 或 仅 需要 矢量 化 图 像 的 一 小 部 分 时 , 栅 格 追踪 会 很 
有 用 。 此 过 程 称 为 交互 式 矢 量化 ,与 编辑 过 程 中 创建 要 素 的 技术 类 似 。 交 互 式 矢 量化 由 以 
下 部 分 组 成 : 栅 格 捕捉 、 栅 格 追 踪 和 形状 识别 。 

PE LIE 

ArcScan 扩展 模块 支持 捕捉 到 栅 格 像 元 。 尽 管 栅 格 捕捉 在 栅 格 追踪 过 程 中 并 不 是 必要 
的 ,但 是 它 有 助 于 确保 准确 地 创建 要 素 。 使 用 栅 格 捕捉 ,可 以 方便 地 捕捉 栅 格 中 心 线 、 交 点 、 
拐角 、 端 点 和 实体 。 

2) 栅 格 追踪 

使 用 "矢量 化 追踪 ?工具 ,可 以 手动 追踪 栅 格 像 元 以 生成 线 或 多 边 形 要 素 。 栅 格 追踪 与 
栅 格 捕捉 相 结合 是 一 种 将 栅 格 数据 转换 为 矢量 要 素 的 准确 有 效 的 方法 。 在 追踪 前 调整 矢量 
化 设置 ,可 以 控制 输出 矢量 要 素 的 几何 组 成 。 通 过 追踪 将 新 要 素 添 加 到 数据 库 后 ,还 可 以 利 
用 其 他 工具 (如 拓扑 、 高 级 编辑 和 空间 校正 ) 来 修改 数据 。 

3) 形状 识别 

形状 识别 工具 可 用 于 捕获 特定 形状 的 矢量 要 素 , 如 建筑 物 或 储 油 饶 。 因 此 ,只 需 在 想 要 
捕获 的 栅 格 要 素 上 单 击 一 次 即 可 生成 自动 要 素 。 

3. 自动 矢量 化 

自动 矢量 化 是 一 种 将 栅 格 数据 自动 转换 为 矢量 要 素 的 方法 。 此 过 程 将 根据 用 户 输入 来 
控制 如 何 执行 矢量 化 。 矢 量化 结果 还 与 其 他 一 些 因素 有 关 , 如 图 像 分 辩 率 .图 像 中 的 噪点 量 
以 及 扫描 文档 的 实际 内 容 。 

ArcScan 支持 两 种 矢量 化 方法 : 中 心 线 和 轮廓 。 中 心 线 矢量 化 将 沿 着 栅 格 线 状元 素 的 
中 心 生 成 撩 量 要 素 。 轮 廓 矢量 化 将 沿 着 栅 格 线 状元 素 的 边界 生成 矢量 要 素 。 

自动 矢量 化 需要 一 些 设置 来 影响 矢量 要 素 生 成 方式 。 这 些 设 置 也 称 为 样式 ,可 以 将 其 
保存 并 重复 用 于 那些 需 处 理 相似 特征 的 栅 格 图 像 。 

矢量 化 成 功 与 否 ,可 通过 进行 转换 时 被 扫描 文档 的 状态 来 判定 。 在 要 素 生 成 之 前 对 图 
像 进行 修改 有 时 是 很 有 必要 的 。 此 过 程 称 为 栅 格 预 处 理 , 可 帮助 清除 栅 格 的 特定 部 分 ,这 将 
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有 助 于 定义 矢量 化 的 范围 .“ 栅 格 清理 ?工具 可 用 于 执行 这 些 操作 。 此 外 ,还 可 同时 使 用 栅 
格 选择 工具 和 栅 格 清理 工具 (或 单独 使 用 栅 格 选择 工具 ) 来 隔离 要 矢量 化 的 栅 格 像 元 。 

除了 对 原始 栅 格 图 像 的 操作 之 外 ,自动 矢量 化 中 影响 最 大 的 因素 就 是 参数 设置 。 这 些 
设置 用 于 控制 要 矢量 化 的 像 元 ,以 及 应 用 于 输出 矢量 数据 的 概 化 量 和 平滑 程度 。 你 可 以 通 
过 修改 这 些 设 置 ,并 直接 在 地 图 中 预览 效果 以 了 解 它 们 对 矢量 化 的 影响 。 确 定 了 适当 的 设 
午后 ,就 可 以 对 整个 栅 格 图 层 或 其 特定 区 域 进 行 矢 量化 。 数 据 创建 后 ,还 可 以 使 用 其 他 编辑 
工具 (如 拓扑 、 高 级 编辑 和 空间 校正 ) 来 进一步 优化 数据 (如 果 必 要 )。 

4. 选择 栅 格 像 元 

ArcScan 支持 对 栅 格 像 元 进行 选择 。 相 连 的 栅 格 像 元 是 那些 共用 相 邻 边界 的 栅 格 像 
素 。 它 们 既 可 以 是 并 排 排列 ,也 可 以 是 对 角 线 式 排列 。 可 根据 不 同 的 目的 (如 矢量 化 .导出 
或 移 除 ) 通 过 此 功能 来 选择 部 分 机 格 。 

栅 格 选择 工具 有 助 于 你 关注 机 格 数据 的 重要 部 分 ,而 将 不 感 兴趣 的 部 分 隔离 开 。 通 过 
单 击 一 系列 已 连接 像 元 或 执行 基于 表达 式 的 查询 ,可 以 交互 创建 栅 格 选择 内 容 。 这 些 选择 
工具 可 以 帮助 你 定义 矢量 化 范围 。 

5. 矢量 化 前 清理 栅 格 

ArcScan 还 包含 用 于 编辑 栅 格 图 像 的 工具 。 绘 制 、 填 充 及 擦 除 栅 格 像 元 等 操作 都 可 以 
在 ArcMap 编辑 会 话 中 进行 。 这 些 操作 称 为 栅 格 清理 ,可 用 来 排除 超出 矢量 化 范围 的 栅 格 
像 元 。 此 外 ,如 果 需 要 保留 原始 副本 ,还 可 将 修改 后 的 栅 格 导出 到 新 的 文件 中 。 


5.2.3 矢量 化 过 程 示例 


5.2.2 节 介绍 了 地 图 矢量 化 的 一 些 基本 概念 和 相关 工具 ,本 节 通 过 一 个 地 图 矢量 化 
的 示例 来 进一步 让 读者 学 会 如 何 矢量 化 地 图 。 
接 下 来 ,以 某 校园 地 图 为 例 来 进行 说 明 ,具体 步 
又 如 下 : 

(1) 打开 ArcCatalog, 在 目录 树 框 中 右 击 已 经 
连接 成 功 的 文件 夹 ,弹出 对 话 框 ,然后 选择 “新 
#t” > Shapefile. 4 HH FA 5. 2-9 所 示 的 对 话 框 ,输入 
名 称 ,要 素 类 型 选择 折线 , 单 击 "编辑 "按钮 ,选择 地 
理 坐 标 系 *“WGS_1984”, 勾 选 “ 坐 标 将 包含 M 值 ” 
选项 ,最 后 单 击 “ 确 定 ” 按 钮 。 

(2) 新 建 空白 地 图 ,打开 ArcMap, 然 后 单 击 
ioe “新 建 > 按 钮 ,弹出 新 建 对 话 框 ,选择 模板 中 的 空 
rr lat 白地 图 并 设置 好 地 图 的 默认 地 理 数据 库 位 置 , 建 

人 (mem) | 好 之 后 为 地 图 添加 底 图 ,添加 底 图 的 目的 是 为 
了 接 下 来 绘制 道路 图 层 提供 参考 ,如 图 5. 2-10 
图 5.2-9 新 建 Shapefile 对 话 框 所 示 。 
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图 5.2-10 新 建 地 图 并 加 载 底 图 


(3) 添加 刚刚 新 建 的 Shapefile 数据 ,在 Arcmap 中 单 击 添加 数据 按钮 ,找到 刚刚 新 建 的 
Shapefile 文件 ,最 后 单 击 “ 确 定 ” 按 钮 。 

(A) 编辑 Shapefile, 展 开 编 辑 器 并 单 击 “ 开 始 编辑 ”按钮 ,然后 打开 新 建 要 素 窗 口 ( 见 
图 5. 2-11) ,选择 roa 图 层 ,在 构建 工具 里 选择 线 要 素 , 这 样 就 可 以 开始 矢量 化 校园 路 网 。 


图 5.2-11 创建 线 要 素 
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(5) 保存 绘制 结果 ,选择 编辑 器 中 的 停止 编辑 ,然后 保存 编辑 的 结果 ,最 后 效果 图 如 
图 5. 2-12 所 示 。 


SED NUN) HE MAD BAS) JBPAGNG) 白 定 X(O。 NO) EMM 
sm 


回回 World Imagery 


120.026 30.229 十 进 制 度 


图 5. 2-12 绘制 路 网 


小 结 ”以 上 步骤 简单 地 示范 了 如 何 拓 量化 路 网 数据 。 案例 中 使 用 的 是 栅 格 地 图 ,在 实 
际 应 用 中 ,可 以 矢量 化 的 资源 还 有 很 多 ,在 此 就 不 展开 讲述 了 。 


5.3 地 图 服务 发 布 


5.3.1 服务 类 型 


你 不 需要 任何 专用 的 GIS 软件 便 可 使 用 服务 ; 可 在 Web 浏览 器 或 自 定义 应 iara 
使 用 服务 。 然 而 ,ArcGIS 应 用 程序 (如 ArcMap 和 ArcGlobe) tt; nf FAVE GIS 服务 的 客户 端 
使 用 由 ArcGIS Server 托管 的 服务 时 ,大 多 数 情况 下 ,你 对 此 资源 所 具有 的 访问 权限 与 此 资 
源 位 于 你 的 计算 机 上 时 所 具有 的 访问 权限 相同 。 例 如 ,地 图 服务 允许 客户 端 应 用 程序 访问 
服务 器 上 的 地 图 内 容 , 所 允许 的 访问 方式 与 地 图 文档 存储 在 本 地 时 的 访问 方式 大 致 相同 。 
将 GIS 资源 发 布 为 服务 是 使 该 资源 可 供 其 他 用 户 使 用 的 关键 。 部 署 ArcGIS Server 时 ,将 
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遵循 在 ArcGIS for Desktop 中 创建 资源 并 将 资源 发 布 为 服务 的 常用 方式 ,以 便 客户 端 应 用 
程序 可 以 使 用 这 些 资源 。 表 5. 3-1 总 结 了 服务 类 型 以 及 每 项 服务 所 需 的 GIS 资源 。 


表 5.3-1 GIS 服务 类 型 


服务 类 型 所 需 的 GIS 资源 
地 图 服务 地 图 文档 (. mxd) 
地 理 编码 服务 地 址 定位 器 (. loc、. mxs、SDE 批量 定位 器 ) 
地 理 数 据 服 务 地 理 数据 库 的 文件 地 理 数 据 库 或 数据 库 连接 文件 (. sde) 
地 理 处 理 服务 ArcGIS for Desktop 中 来 自 结果 窗口 的 地 理 处 理 结果 
Globe 服务 Globe 文档 (. 3dd) 
影像 服务 栅 格 数据 集 、 镶 伐 数据 集 或 者 引用 栅 格 数据 集 或 镶嵌 数据 集 的 图 层 文件 
搜索 服务 想 要 搜索 的 GIS 内 容 所 在 的 文件 夹 和 地 理 数据 库 


Workflow Manager 服务 ArcGIS Workflow Manager 资料 档案 库 


1. 要 素 服务 

要 素 服务 可 用 来 通过 Internet 提供 要 素 , 并 提供 显示 要 素 时 所 要 使 用 的 符号 系统 。 之 
后 ,客户 端 可 执行 查询 操作 以 获取 要 素 ,并 执行 相应 的 编辑 操作 。 要 素 服务 提供 了 可 用 于 提 
高 客户 端 编辑 体验 的 模板 。 此 外 ,要 素 服务 也 可 以 对 关系 类 和 非 空间 表 中 的 数据 进行 查询 
和 编辑 。 

2. 地 理 编码 服务 

地 理 编 码 服务 支持 多 种 应 用 程序 。 从 业务 和 客户 管理 到 运输 和 配送 ,再 到 获得 要 到 
达 你 需要 前 往 的 地 点 的 路 线 ,都 可 通过 地 理 编码 服务 得 到 很 好 的 支持 。 你 可 以 通过 地 理 
编码 在 地 图 中 查找 及 显示 地 址 ,还 可 以 查看 该 地 址 与 周围 要 素 的 关系 。 有 时 ,只 需 查看 
地 图 便 可 发 现 相 互 间 的 空间 关系 ; 此 外 ,也 可 使 用 空间 分 析 工 具 来 获取 那些 难以 发 现 的 
信息 。 

虽然 存在 许多 可 购买 的 地 理 编码 服务 ,但 是 这 些 服务 可 能 由 于 若干 原因 而 无 法 满足 你 
所 在 组 织 的 需求 : 例如 ,未 提供 最 新 的 地 址 信息 、 地 址 格式 不 同 , 或 者 你 希望 用 户 可 通过 本 
地 名 称 或 常用 名 称 ( 如 ”白宫 2) 找到 地 址 位 置 。 所 有 这 些 情 况 都 需要 专用 的 地 理 编 码 解决 方 
案 。 通 过 投入 充足 的 时 间 构 建 满足 你 特定 需求 的 地 理 编码 服务 ,可 确保 你 的 各 项 需求 都 得 
到 满足 。 

要 在 客户 端 上 使 用 地 理 编码 服务 ,需要 首先 在 ArcGIS for Desktop 中 创建 一 个 地 址 定 
位 器 ,然后 将 其 作为 地 理 编码 服务 发 布 到 ArcGIS Server。 发 布 此 服务 后 , 即 可 创建 使 用 地 
理 编码 服务 的 客户 端 应 用 程序 ,以 显示 地 图 上 的 地 址 位 置 。 

3. 地 理 数据 服务 

地 理 数据 服务 允许 你 使 用 ArcGIS for Server 通过 局 域 网 (LAN) 或 Internet 访问 地 理 
数据 库 。 该 服务 可 以 执行 地 理 数 据 库 复制 操作 、 通 过 数据 提取 创建 副本 并 在 地 理 数据 库 中 
执行 查询 。 可 以 为 ArcSDE 地 理 数据 库 和 文件 地 理 数据 库 添 加 地 理 数据 服务 。 

当 你 需要 访问 远程 位 置 上 的 地 理 数 据 库 时 ,地 理 数据 服务 是 非常 有 用 的 。 例 如 ,一 家 公 
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司 可 能 需要 建立 ArcSDE 数据 库 来 管理 洛杉矶 与 纽约 办 事 处 的 数据 。 一 旦 数据 库 创 建 完 
成 ,每 个 办 事 处 都 可 以 在 Internet 上 通过 地 理 数据 服务 发 布 其 ArcSDE 地 理 数据 库 。 然 后 ， 
可 使 用 地 理 数 据 服 务 创 建 ArcSDE 地 理 数据 库 复 本 。 利 用 地 理 数 据 库 复制 功能 ,地 理 数据 
服务 还 可 用 于 通过 Internet 定期 对 每 个 地 理 数据 库 中 的 更 改进 行 同步 。 

4. 地 理 处 理 服务 

地 理 处 理 服务 是 借助 于 万 维 网 来 展示 ArcGIS 强大 分 析 功 能 的 方式 。 地 理 处 理 服务 包 
含 地 理 处 理 任务 ,任务 采用 在 Web 应 用 程序 中 捕获 的 简单 数据 ,对 其 进行 处 理 , 然 后 以 如 下 
形式 返回 有 意义 的 输出 : 要 素 、 地 图 、 报 表 及 文件 。 这 些 服 务 可 以 用 于 计算 危险 化 学 泄漏 物 
的 可 能 朴 散 区 逐渐 增 大 的 由 风 的 预测 踪迹 和 强度 .用 户 定义 的 分 水 岭 内 土地 覆 被 和 土壤 报 
表 、 包 含 所 有 权 历 史 详细 信息 的 宗 地 地 图 或 污水 处 理 系统 的 许可 应 用 。 这 些 服务 的 可 能 性 
是 无 穷 的 。 

地 理 处 理 服务 包含 一 个 或 多 个 地 理 任 务 。 地 理 处 理 任务 是 一 个 运行 在 服务 器 上 的 地 理 
处 理工 具 , 它 的 执行 和 输出 是 通过 服务 器 管理 的 。 将 地 理 处 理 结果 共享 为 地 理 处 理 服务 后 ， 
会 通过 创建 该 结果 的 工具 创建 一 个 对 应 的 地 理 处 理 任 务 。 任 务 是 基于 Web 的 API (如 
JavaScript、SilverLight 和 Flex) 使 用 的 一 个 术语 ,用 于 描述 在 服务 器 上 执行 工作 并 返回 结 
果 这 一 例 程 。 

5. 几何 服务 

几何 服务 用 于 协助 应 用 程序 执行 各 种 几何 计算 ,如 缓冲 区 、 简 化 、 面 积 和 长 度 计算 以 及 
投影 。 此 外 ,ArcGIS Web API 在 Web 编辑 过 程 中 使 用 几何 服务 来 创建 和 修改 各 要 素 几 
何 。 几 何 服务 为 使 用 细 粒 度 的 ArcObjects 或 地 理 处 理 服务 执行 此 类 计算 提供 了 一 种 替代 
方法 。 

在 安装 ArcGIS for Server 时 ,会 在 Utilities 文件 夹 中 自动 创建 几何 服务 。 这 只 对 服务 
器 管理 员 和 发 开 人 员 可 见 , 还 可 通过 管理 器 、ArcCatalog 或 ArcGIS for Desktop 中 的 目录 
窗口 来 进行 配置 。 另 外 ,服务 器 管理 员 和 开发 人 员 可 查看 几何 服务 进而 通过 服务 目录 找 出 
其 REST URL. 

而 那些 仅 与 服务 器 建立 了 用 户 连 接 的 人 员 是 无 法 查看 几何 服务 的 。 但 是 ,他 们 可 能 受 
到 几何 服务 通过 客户 端 应 用 程序 提供 的 新 增 功能 的 影响 ,这 些 应 用 程序 通过 ArcGIS 
Viewer for Flex, ArcGIS Viewer for Silverlight 和 ArcGIS Web API 进行 开发 。 

6. Globe 服务 

Globe 服务 是 一 种 源 于 ArcGlobe 文档 (.3dd) 的 ArcGIS Server Web 服务 。 通 过 该 服 
务 , 你 可 以 使 用 ArcGIS 将 3D 内 容 共 享 到 Web 上 。 你 可 以 使 用 Globe 服务 访问 最 初 在 
ArcGlobe 中 创建 的 3D 内 容 。 从 ArcGIS 10. 1 开始 ,你 可 以 直接 将 Globe 服务 与 ArcGlobe 
以 外 的 客户 端 共 享 。 使 用 Globe 服务 的 客户 端 应 用 程序 包括 ArcGlobe, ArcGIS Explorer 
Desktop, ArcReader 以 及 通过 使 用 Globe 控件 的 ArcGIS Engine 构建 的 任何 自 定义 应 用 
程序 。 
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7. 影像 服务 

影像 服务 的 数据 源 可 以 是 栅 格 数据 集 (来 自 磁盘 上 的 地 理 数 据 库 或 文件 ) PH dn E 
或 者 引用 栅 格 数据 集 或 灸 散 数 据 集 的 图 层 文 件 。 对 定义 了 动态 处 理 的 栅 格 数据 集 或 栅 格 图 
层 ( 例 如 符号 系统 或 栅 格 函数 ) 进 行 共享 是 影像 服务 的 核心 功能 , 它 不 需要 任何 扩展 模块 。 
但 是 ,在 共享 馈 嵌 数据 集 或 包含 镶嵌 函数 的 栅 格 图 层 时 ,需要 ArcGIS Image 扩展 模块 。 这 
不 会 只 影响 影像 服务 。 例 如 ,如 果 你 有 一 个 包含 镶嵌 数据 集 的 地 图 文档 , 则 需要 ArcGIS 
Image 扩展 模块 。 可 以 使 用 ArcGIS Server 将 栅 格 数据 和 影像 数据 作为 影像 服务 共享 。 影 
像 服务 通过 Web 服务 提供 对 栅 格 数据 的 访问 。 也 可 以 将 数据 共享 为 文档 (例如 地 图 文档 或 
Globe 文档 ) 的 一 部 分 或 共享 为 其 他 服务 (例如 地 理 数 据 服务 ) 的 一 部 分 。 

8. KML 服务 

Keyhole 标记 语言 (KML) 是 一 种 基于 XML 的 文件 格式 ,可 用 于 表示 应 用 程序 (如 
ArcGIS Explorer 和 Google 地 球 ) 中 的 地 理 要 素 。KML 人 允许 你 在 地 图 与 Globe 上 绘制 点 、 
线 和 面 ,并 与 他 人 共享 这 些 信息 。 你 也 可 使 用 KML 来 指定 文本 、 图 片 . 电 影 或 者 其 他 的 
GIS 服务 的 链接 , 当 用 户 单 击 要 素 时 会 出 现 这 些 信息 。 许 多 KML 客户 端 应 用 程序 都 是 免 
费 的 ,可 提供 令 人 熟悉 的 用 户 友好 型 导航 体验 。 

使 用 ArcGIS Server, 可 通过 多 种 方式 将 地 图 与 数据 共享 为 KML: 地 图 与 影像 服务 通 
过 表述 性 状态 转移 (REST) 显 示 KML 网 络 链接 ; 可 以 使 用 管理 器 或 服务 目录 来 创建 你 自 
己 的 KML 网 络 链接 ; 当 你 查询 地 图 图 层 或 者 通过 REST 进行 地 理 处 理 或 地 理 编码 操作 
时 ,可 以 获得 KML 形式 的 结果 。 

在 所 有 这 些 情况 下 ,KML 都 是 动态 生成 的 ,这 意味 着 : 查看 KML 的 用 户 将 始终 能 够 
从 服务 器 上 看 到 最 新 的 地 图 与 数据 。 如 果 只 是 想 生成 可 通过 电子 邮件 发 送 或 者 放置 在 文件 
服务 器 上 的 静态 KML 文档 ,可 以 使 用 ArcGIS for Desktop 中 的 地 图 转 KML 和 图 层 转 
KML 工具 。 

9. 地 图 服务 

地 图 服务 是 一 种 利用 ArcGIS 使 地 图 通过 Web 进行 访问 的 方法 。 你 首先 在 ArcMap 
中 制作 地 图 ,然后 将 地 图 作为 服务 发 布 到 ArcGIS Server 站 点 上 。 之 后 , Internet 或 
Intranet 用 户 便 可 在 Web 应 用 程序 、ArcGIS for Desktop, ArcGIS Online 以 及 其 他 客户 端 
应 用 程序 中 使 用 此 地 图 服务 。 

10. OGC 服务 

开放 地 理 空间 联盟 (OGC) Web 服务 能 够 使 地 图 和 数据 以 国际 公认 的 开放 格式 在 Web 
上 使 用 。OGC 定义 了 相关 规范 ,可 使 具有 客户 端 应 用 程序 的 任何 人 均 可 在 Web 上 使 用 地 
图 和 数据 。 所 有 开发 人 员 均 可 免费 使 用 OGC 规范 来 创建 此 类 受 支 持 的 客户 端 。 某 些 情况 
下 ,客户 端 可 能 如 同 Web 浏览 器 一 样 简单 。 其 他 情况 下 , 它 可 能 是 如 同 ArcMap 一 样 的 丰 
富 客户 端 。 

11. Schematics 服务 

Schematics 服务 允许 Web 应 用 程序 通过 Web 服务 访问 逻辑 示意 图 。 该 服务 使 用 
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Schematics 扩展 模块 功能 来 访问 .创建 .更 新 和 编辑 逻辑 示意 图 。 

12. 搜索 服务 

搜索 服务 可 在 本 地 网 络 上 为 你 提供 GIS 内 容 的 可 搜索 索引 。 搜 索 服 务 在 进行 大 型 的 
企业 级 部 署 (GIS 数据 分 布 在 多 个 数据 库 及 文件 共享 中 ) 时 用 处 最 大 。GIS 分 析 人 员 可 通过 
输入 搜索 服务 的 URL 链接 ,然后 输入 一 些 搜索 词 查找 所 需 的 数据 ,而 不 必 从 头 至 尾 浏览 所 
有 数据 源 。ArcMap 为 用 户 提供 了 一 个 搜索 接口 ,用 于 帮助 用 户 以 这 种 方式 搜索 数据 并 将 
结果 数据 集 拖 放 到 地 图 中 。 

13. Workflow Manager 服务 

Workflow Manager 服务 是 一 种 源 于 ArcGIS Workflow Manager 资料 档案 库 的 
ArcGIS 服务 ,通过 这 种 方法 可 使 用 ArcGIS 在 Web 上 提供 工作 流 管 理 功能 。 你 将 使 用 
Desktop 工具 来 定义 Workflow Manager 系统 ,然后 将 资料 档案 库 作为 服务 在 ArcGIS for 
Server 上 发 布 。 


5.3.2 发 布 服 务 


GIS 资源 包括 地 图 、 工 具 、 地 理 数 据 库 , 以 及 可 通过 ArcGISServer 公开 的 其 他 项 目 。 虽 
然 可 发 布 到 服务 器 上 的 GIS 资源 多 种 多 样 , 但 发 布 服务 的 步骤 均 遵 循 一 种 共同 的 模式 。 若 
要 将 GIS 资源 作为 服务 发 布 至 服务 器 ,请 执行 以 下 步骤 : 
CD 根据 要 发 布 到 服务 器 的 具体 资源 ,按照 表 5. 3-2 中 的 说 明 进 行 操作 。 
表 5.3-2 ”如何 发 布 服务 方法 概述 


选 项 操 fF 
如 果 要 发 布地 图 或 Globe XH... 打开 ArcMap 或 ArcGlobe 文 档 , 然 后 从 主 菜单 中 选择 “文件 一 
共享 为 一 服务” 
如 果 要 发 布地 理 处 理 模型 或 工具 .… ”浏览 到 结果 窗口 中 模型 或 工具 的 一 个 成 功 结果 , 右 击 并 选择 “ 共 
享 为 ~ 地 理 处 理 服务 ” 
如 果 要 发 布 其 他 内 容 , 例 如 地 理 数据 ”浏览 到 ArcCatalog 或 目录 窗口 中 的 相应 项 目 , 右 击 并 选择 “共享 
库 或 地 址 定位 器 .… 为 服务 ” 


(2) 在 “共享 为 "服务 窗口 中 ,选择 “发 布 服务 ”, 然 后 单 击 “ 下 一 步 ”。 

(3) 在 选择 连接 下 拉 列 表 中 选择 “要 使 用 的 ArcGISServer 连接 ”, 如 果 要 使 用 的 服务 器 
连接 并 未 列 出 ,可 单 击 “ 连 接 到 ArcGISServer” 添 加 ArcGISServer 创建 一 个 新 的 连接 。 

(4) 默认 情况 下 ,会 根据 GIS 资源 的 名 称 生成 服务 的 名 称 ,还 可 以 在 发 布 服务 窗口 中 ， 
输入 新 的 服务 名 称 , 名 称 长 度 不 能 超过 120 个 字符 ,并 且 只 能 包含 字母 数字 字符 和 下 划 线 ， 
然后 单 击 “ 下 一 步 ?按钮 。 

(5) 默认 情况 下 ,服务 会 发 布 到 ArcGISServer 的 根 文件 夹 下 ,也 可 将 服务 组 织 到 根 文 
件 夹 下 的 子 文件 夹 中 ; 选择 要 将 服务 发 布 到 的 文件 夹 , 或 创建 一 个 用 于 包含 此 服务 的 新 文 
件 夹 ,然后 单 击 “ 继 续 ”, 打 开 服 务 编 辑 咒 对 话 框 。 
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(6) 设置 要 使 用 的 服务 属性 ,可 以 选择 用 户 可 对 服务 执行 的 操作 , 且 可 精细 控制 服务 器 
显示 服务 的 方式 。 有 关 如 何 手动 设置 服务 属性 的 详细 信息 ,请 在 帮助 的 服务 类 型 部 分 中 查 
找 你 的 服务 ; 此 外 ,还 可 单 击 导 入 从 现 有 服务 定义 或 已 发 布 的 服务 自动 导入 属性 。 


提示 。 如 果 在 此 会 话 期 间 关 闭 了 服务 编辑 器 ,会 提示 你 将 作品 保存 为 草稿 服务 。 草 稿 服 
务 使 你 能 够 在 以 后 返回 到 该 界面 以 继续 完成 服务 配置 工作 。 默 认 情 况 下 ,草稿 服 
务 保存 在 ArcGISServer 连接 的 草稿 文件 夹 中 。 有 关 详 细 信 息 , 请 参阅 关于 草稿 
服务 。 


CD 单 击 J 分 析 , 该 操作 可 对 GIS 资源 进行 检查 ,以 确定 其 是 否 能 够 发 布 到 服务 器 。 

(8) 将 GIS 资源 发 布 为 服务 之 前 ,必须 修复 准备 窗口 中 出 现 的 所 有 错误 ,另外 ,你 还 可 
以 修复 警告 和 通知 消息 ,以 进一步 完善 服务 的 性 能 和 显示 。 

(9) 也 可 单 击 量 预览 ,这 样 便 可 以 了 解 在 Web 上 查看 服务 时 服务 的 外 观 。 


提示 可 将 文件 夹 和 地 理 数 据 库 注册 到 ArcGISServer 站 点 ,从 而 确保 服务 器 可 识别 并 使 用 
数据 。 如 果 继 续 以 下 步骤 ,那么 服务 所 引用 的 来 自 取消 注册 的 文件 夹 或 地 理 数据 库 
的 所 有 数据 都 将 在 发 布 时 复制 到 服务 器 。 这 是 一 种 预防 性 措施 ,可 确保 服务 器 能 够 
访问 服务 所 使 用 的 所 有 数据 。 


(10) 修复 错误 以 及 警告 和 消息 (可 选 ) 后 , 单 击 砍 发 布 。 


提示 “如 果 发 布 的 服务 需要 将 数据 复制 到 服务 器 , 则 数据 的 大 小 和 网 络 带宽 将 影响 发 布 所 
需 的 时 间 。 现 在 ,你 的 服务 已 运行 在 服务 器 上 ,可 供 网 络 中 的 用 户 和 客户 端 访问 。 如 
果 服 务 器 管理 员 允 许 Web 访问 服务 , 则 你 的 服务 此 时 在 Web 上 也 可 用 。 


接 下 来 以 ArcMap 中 连接 PostgreSQL 数据 库 为 例 , 详 细 地 讲述 发 布 服务 的 过 程 。 

1) 在 ArcMap 中 连接 PostgreSQL 数据 库 

在 进行 数据 库 的 连接 之 前 复制 一 些 必需 的 库 文件 .如 果 安 装 的 ArcMap 是 32 位 的 , 则 
需要 复制 32 位 的 PostgreSQL 中 Lib 目录 下 的 libeay32. dll, libiconv-2. dll, libintl-8. dll, 
libpq. dll 和 ssleay32. dll 文件 到 Arcmap 安装 目录 下 的 bin 文件 夹 中 。 如 果 安 装 的 
ArcMap 是 64 位 的 则 需要 复制 64 位 PostgreSQL 的 libeay32. dll, libintl. dll, libpq. dll 和 
ssleay32. dll 文件 到 Arcmap 的 bin 文 件 夹 下 。 然 后 在 ArcMap 的 安装 目录 下 找到 和 数 
据 库 对 应 版 本 的 st_geometry. dll 库 文件 ,复制 到 PostgrSQL 安装 目录 下 的 lib 文 件 
夹 中 。 

2) 创建 企业 级 地 理 数据 库 

打开 ArcMap ,选择 “文件 一 新 建 ", 选 择 空白 地 图 ,新 建 一 个 空白 的 文档 ,如 图 5. 3-1 
DES 


126 «|| WebGIS 工 程 项 目 开 发 实践 


Choose a template for your new map. BAR 
B p- My Templates a 
Templates 


8 Traditional Layouts Blank Map 


C:\Users\GD-1\AppData\Roaming\ESRI\Desktop10.2\ArcMap\Templates\Normal.mxt 
Default geodatabase for this map: What is this? 
C:\Users\GD-1\Documents\ArcGIS\Default.gdb X 图 


图 5.3-1 新 建 一 个 空白 页 面 


在 右 侧面 板 中 选中 搜索 选项 卡 ,输入 创建 企业 级 地 理 数据 库 , 单 击 进入 创建 企业 数据 库 
对 话 框 ,如 图 5. 3-2 所 示 。 


e»|&2|d- 
全 部 ”地 图 fus 


1 项 > 


不 、 创 建 企业 级 地 理 数据 库 (Data Manageme... 
创建 企业 级 地 理 数据 库 工 具 根据 所 使 用 的 数据 .… 
TREVIRA Adata management tools.tb... 


CERE 


5.3-2 ”创建 一 个 企业 级 数据 库 


数据 平台 选择 PostgreSQL, 因 为 是 本 地 连接 ,所 以 实例 中 填写 localhost, 将 数据 库 名 称 命 
名 为 basemap, 输 入 相应 的 账号 和 密码 并 选择 授权 文件 后 单 击 “ 确 定 ” 按 钮 ,如 图 5. 3-3 所 示 。 
如 果 出 现 图 5. 3-4 所 示 界 面 说明 企 业 级 地 理 数据 库 已 经 创建 成 功 。 


网 
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[ejm] x 


PostgreSQL 
Ex] 
localhost 
数据 库 (可 选 ) 


basenap 


操作 系统 身份 验证 〈 可 选 ) 
数据 库 管理 员 (可 选 ) 
postgres 
数据 库 管理 员 密码 (可 选 ) 
O99999 

v]sde 拥有 的 方案 (可 选 ) 
地 理 数据 库 管理 员 (可 选 ) 
sde 


地 理 数据 库 管理 员 密码 〈 可 选 ) 
eee 


表 空 间 名 称 (可 选 ) 


授权 文件 
C:\Program Files\ESRI\Licensel0.2\sysgen\keycodes 


(E )( mà 


成 功 完成 时 关闭 此 对 话 框 


执行 : CreateEnterpriseGeodatabase PostgreSQL localhost basemap DATABASE AUTH postgres ***** |^ 
SDE SCHEMA sde ***** # "C:\Program Files\BSRI\License10. 2\sysgen\keycodes” 
开始 时 间 : Tue Dec 09 15:45:42 2014 

用 户 具有 创建 数据 库 对 象 的 必要 权限 。 

地 理 数据 库 管理 员 用 户 已 存在 。 

数据 库 已 存在 。 

验证 的 授权 文件 。 

用 户 具有 进行 地 理 数据 库 设置 的 必要 权限 。 

已 启动 数据 库 实例 的 XML 支持 。 

已 连接 的 RDBMS 实例 针对 Esri 空间 类 型 配置 进行 相应 设置 。 

已 创建 的 地 理 数据 库 表 和 存储 过 程 。 

已 完成 地 理 数据 库 方案 的 创建 。 

成 功 在 Tue Dec 09 15:46:14 2014 (经 历 的 时 间 : 32.01 秒 ) 


图 5. 3-4 地 理 数据 库 创建 成 功 
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3) 添加 数据 库 连 接 


如 果 要 在 ArcMap 里 对 数据 库 进行 操作 , 单 是 创建 数据 库 还 不 够 ,需要 继续 在 ArcMap 
中 添加 一 个 数据 连接 ,在 侧 栏目 录 中 单 击 添加 数据 库 连 接 , 弹 出 图 5. 3-5 所 示 的 连接 设置 对 


话 框 。 


PEPESTUIESMFYLT 


位 置 : ” 壁 添加 数据库 连接 


Nn ArcGIS Server 
二 添加 ArcIMS Server 


如 图 5. 3-6 所 示 ,因为 之 前 创建 数据 库 使 用 的 是 sde 账号 ,所 以 用 户 名 输入 sde 的 信息 ， 
否则 会 出 现 无 法 连接 的 错误 。 输 入 账号 信息 后 在 数据 库 下 拉 菜 单 中 选择 之 前 新 建 的 


图 5. 3-5 ”添加 数据 库 连接 


basemap 数据 库 , 单 击 “ 确 定 ” 完 成 新 建 数据 库 连接 的 设置 。 


" 


L 


数据 库 平台 : 


实例 : 


身份 验证 类 型 : 


localhost 


(HEmaGER  — 0 0 0 7 


用 户 名 : sde 

- 

保存 用 户 名 和 密码 

basemap - 
m cm NN 


图 5. 3-6 ”填写 数据 库 连 接 的 基本 信息 
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设置 完成 后 右 侧 目录 栏 会 出 现 一 个 新 的 连接 到 localhost. sde 选项 ,如 图 5. 3-7 所 示 , 说 
明 数 据 库 连 接 的 设置 已 经 成 功 完 成 。 


位 置 : ”如 连接 到 localhost.sde 


图 5. 3-7 数据 库 连接 设置 完成 
4) 添加 ArcGIS Server 


在 将 服务 发布 到 Server 之 前 需要 在 目录 中 添加 一 个 GIS 服务 器 的 连接 ,双击 


ArcCatalog 目录 中 的 “添加 ArcGIS Server”, 弹 出 图 5. 3-8 所 示 对 话 框 ,选择 “管理 GIS 服务 
器 ”, 然 后 单 击 “ 下 一 步 ”按钮 。 


EUREN gites OF 


执行 哪 项 操作 ? 


OHA cis 服务 
Om cis 服务 


Q ES cis 服务 器 


< E50) Llora j 


图 5.3-8 添加 ArcGIS Server 连接 
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为 这 个 连接 添加 管理 员 权限 以 便 更 方便 地 对 Server 进行 操作 ,选择 管理 GIS 服务 器 进 
入 下 一 步 ,弹出 5. 3-9 所 示 的 对 话 框 。 


服务 器 URL): http://localhost:6080/arcgis 


ArcGIS Server: http://nyserver:6080/arcgis 
Spatial Data Server: http://nyserver:8080/arcgis 


服务 器 类 型 (): — [areozscserven er] 


过 渡 文件 夹 (S) : :\Users\GD-1\AppData\Local \Teap\arc6D52\S le] 


使 用 ArcGIS Desktop 的 过 渡 文件 夹 (F) 
身份 验证 
APAN): arcgis 
EBV: OII 
Iv 保存 用 户 名 /密码 (V) 
关于 ArcGIS Server 连接 
关于 Spatial Data Server 连接 


图 5. 3-9 填写 ArcGIS Server 的 连接 信息 


填写 服务 器 URL 和 ArcGIS Server 的 用 户 名 和 密码 ,内 容 为 安装 ArcGIS Server 时 填 
写 的 信息 ,然后 选择 完成 。 成 功 添加 服务 器 连接 后 在 目录 中 会 增加 新 的 选项 arcgis on 
localhost_6080( 系 统管 理 员 ) ,如 图 5. 3-10 所 示 。 © ay GIS 服务器 

现在 已 经 成 功 将 ArcMap 连接 到 ArcGIS Leere 
Server 了 , 接 下 来 可 以 将 各 种 可 发 布 的 GIS 资源 发 dà 添加 WCS 服务 器 
布 到 ArcGIS Server 中 ,将 之 前 已 经 制作 好 的 地 图 | Sem wars mem 


打开 ,然后 依次 单 击 “文件 ”>“ 共 享 为 ">“* 服 务 ”, 此 & Garcgis on localhost 6080 (系统 管理 员 ) 


B E System 
时 会 弹出 发 布 服务 界面 ,如 图 5. 3-11 所 示 。 共 享 为 Bue 
服务 主要 有 三 个 选项 ,“ 发 布 服务 ”主要 用 于 发 布 新 IB SampleWorldcities 


的 服务 到 服务 器 ,“ 保 存 服务 定义 文件 "用 于 保存 编 、 避 包 吕 aass 
辑 的 服务 到 指定 文件 夹 以 便 重复 使 用 “覆盖 现 有 服 。 POSER 
务 " 用 要 发 布 的 服务 将 原来 的 服务 覆盖 ,这 里 在 弹出 ”图 $ 9 10 IRMA ARGIS Server 
的 “共享 为 服务 ”对话 框 中 选择 “发 布 服务 ”然后 单 的 连接 
击 “ 下 一 步 "按钮 。 

接 下 来 弹出 图 5. 3-12 所 示 界 面 , 单 击 下 拉 列 表 框 选择 之 前 添加 成 功 的 ArcGIS Server 
连接 ,并 输入 “basemap” 作 为 服务 名 称 ,然后 单 击 " 下 一 步 ” 按 钮 。 

接 下 来 弹出 选择 发 布 位 置 对 话 框 ,选择 “使 用 现 有 文件 夹 ”选项 即 可 , 单 击 “ 下 一 步 ” 按 
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图 发 布 服务 
人 保存 服务 定义 文件 
侣 覆盖 现 有 服务 


图 


应 用 


图 5.3-11 选择 发 布 类 型 


选择 一 个 连接 
(reris on localhost6080 (RMR) — 8 "J(aj) 
服务 器 类 型 : ArcGIS Server 

服务 名 称 


basenap 


5.3-12 选择 连接 和 服务 名 称 


钮 ,弹出 图 5. 3-13 所 示 界 面 。 
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在 服务 编辑 器 中 可 以 对 发 布 的 服务 进行 相应 的 分 析 和 设置 。 在 之 后 的 开发 中 将 用 到 地 
图 要 素 服 务 , 单 击 服务 编辑 器 侧 栏 中 的 功能 .选择 要 发 布 的 服务 类 型 ,除了 默认 选择 的 地 图 
服务 和 KML 服务 之 外 再 勾 选 “Feature Access” 以 便 发 布 要 素 服务 ,如 图 5. 3-14 所 示 。 
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连接 arcgis on localhost 6080 (系统 管理 员 ) 服务 名 称 : mymap QS von ann qim © 


‘ArcGIS Server 


地 图 服务 
贺 立 即 启动 服务 


5. 3-13 ”对 服务 进行 设置 


连接 : arcgis on localhost 6080 (系统 管理 员 ) 服务 名 称 : mymap 


功能 
选择 要 针对 此 服务 启用 的 功能 : 


QS vo ani dis © 


5.314 发 布 要 素 服务 
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最 后 单 击 右 上 角 的 “分 析 ” 按 钮 对 地 图 进行 发 布 检查 ,系统 可 能 会 提示 发 布 要 素 服务 需 
要 注册 数据 库 的 错误 ,如 图 5. 3-15 所 示 , 双 击 错误 。 


日 高 未 解决 00090 要 素 服务 需要 一 个 已 注册 的 数据 库 


5.3-15 注册 数据 库 的 提示 


弹出 图 5. 3-16 所 示 的 注册 数据 库 界面 , 单 击 Et 按钮 , 即 可 打开 注册 数据 库 
向 导 。 


数据 存储 
已 注册 的 数据 库 
mum 
"m 
已 注册 的 文件 夹 
nda 
m» 
=) cci.) (RO 


图 5.3-16 注册 数据 库 对 话 框 


此 时 会 弹出 图 5. 3-17 所 示 的 界面 ,在 弹出 的 注册 数据 库 对 话 框 中 输入 要 注册 的 数据 库 
名 称 basemap ,选择 添加 一 个 publish 数据 库 连 接 。 

在 添加 数据 库 界 面 ,输入 数据 库 连接 的 相关 信息 ,完成 数据 库 注册 ,如 图 5. 3-18 所 示 ， 
然后 单 击 “ 确 定 ” 按 钮 。 

弹出 图 5. 3-19 所 示 的 界面 ,在 已 注册 数据 库 中 可 以 看 到 刚刚 成 功 注 册 的 名 为 
“basemap” 的 数据 库 , 重 新 对 地 图 服务 进行 分 析 , 若 分 析 结 果 显示 没有 错误 就 可 以 单 击发 布 
按钮 将 服务 发 布 到 ArcGIS Server。 

成 功 发 布 服务 后 ,打开 浏览 器 ,输入 http://localhost: 6080/arcgis/manager/, 进 入 
ArcGIS Server Manager 管理 界面 .如 图 5. 3-20 所 示 , 可 以 看 到 basemap 服务 已 经 成 功 发 
布 , 单 击 预览 图 可 以 预览 发 布 效果 , 单 击 标题 可 以 对 服务 进行 管理 和 设置 。 
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将 数据 库 注册 到 ArcGIS Server 


服务 器 数据 库 连 接 
与 发 布 者 数据 库 连接 相同 


图 5.3-17 注册 数据 库 


MESTE: (mage e] 


实例 : localhost 


身份 验证 类 型 : (HResHER | 


用 户 名 : postgres 

ER: - 

Io fetz P eios 
数据 库 : basemap X 
armas aa 


5. 3-18 填写 注册 数据 库 连 接 信息 


网 
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数据 存储 
已 注册 的 数据 库 
w/ basemap 


E 


已 注册 的 文件 夹 


[应 用 (a) 


sub œ) 


basemap / émis) Adrux 


服务 
RD | 
> SAMIR: 1 
anan x A. | saama: 0 
BASE | akzxaa: 2 


|a Utilities 


SampleWorldCities / GRES) ax 
SampleWorldCities 黑 务 用 于 快速 轻松 地 视 此 GIS MAANDE. PARREREN web 应 用 程序 
中 打开 它 。 HARE ATR. EREI- 

RB: 


5.3-20 ”服务 发 布 成 功 
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5.4 使 用 服务 


Esri 提供 了 用 于 JavaScript, Flex 和 Silverlight 的 Web 制图 API。 可 使 用 这 些 API 从 
头 开始 构建 Web 应 用 程序 。 它 们 提供 了 通用 GIS 功能 ,通过 学 习 官 方 提供 的 API 可 以 方 
便 地 调用 相关 功能 实现 Server API 技术 ,从 而 构建 自己 的 Web GIS 网 站 。 接 下 来 具体 介 
绍 如 何 使 用 JavaScript, Flex 和 Silverlight 来 加 载 一 张 基本 的 地 图 。 


5.4.1 ArcGIS API for JavaScript 简介 


ArcGIS API for JavaScript 是 由 Esri 公司 推出 ,跟随 ArcGIS 9. 3 同时 发 布 的 ,是 Esri 
基于 Dojo 框架 和 REST 风格 实现 的 一 套 编程 接口 。 通 过 ArcGIS API for JavaScript 可 以 
对 ArcGIS for Server 进行 访问 ,并 且 将 ArcGIS for Server 提供 的 地 图 资源 和 其 他 资源 
(ArcGIS Online) KAP) Web 应 用 中 。 

ArcGIS API for JavaScript 的 主要 功能 如 下 : 

(1) 空间 数据 展示 : 加 载 地 图 服务 ,影像 服务 ,WMS 等 。 

(2) 客户 端 Mashup: 将 来 自 不 同 服务 器 ,不 同类 型 的 服务 在 客户 端 聚 合 后 统一 呈现 给 
客户 。 

(3) 图 形 绘 制 : 在 地 图 上 交互 式 地 绘制 查询 范围 或 地 理 标 记 等 。 

(4) 符号 泻 染 : 提供 对 图 形 进行 符号 化 、 要 素 图 层 生成 专题 图 和 服务 器 端 演 染 等 功能 。 

O) 查询 检索 : 基于 属性 和 空间 位 置 进行 查询 ,支持 关联 查询 ,对 查询 结果 的 排序 、 分 
组 以 及 对 属性 数据 的 统计 。 

(6) 地 理 处 理 : 调用 ArcGIS for Server 发 布 的 地 理 处 理 服务 (Geoprocessing 服务 ) , 执 
行 空间 分 析 、 地 理 处 理 或 其 他 需要 服务 器 端 执行 的 工具 、 模 型 .运算 等 。 

(7) 网 络 分 析 : 计算 最 优 路 径 、 附 近 设施 和 服务 区 域 等 。 

(8) 在 线 编辑 : 通过 要 素 服务 编辑 要 素 图 形 、 属 性 、 附 件 以 及 编辑 追踪 。 

(9) 时 态 感知 : 展示 、 查 询 具 有 时 间 特 征 的 地 图 服务 或 影像 服务 数据 。 

(10) 影像 处 理 : 提供 动态 镶嵌 、 实 时 栅 格 函数 处 理 等 功能 。 

QD 地 图 输出 : 提供 多 种 地 图 图 片 导出 和 服务 器 端 打 印 等 功能 。 

1. JavaScript 简介 

JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 安全 性 能 的 脚 
本 语言 。 使 用 它 的 目 是 与 HTML 超 文本 标记 语言 ,Java 脚本 语言 (Java 小 程序 ) 一 起 实现 
在 一 个 Web 页 面 中 连接 多 个 对 象 ,与 Web 客户 交互 作用 ,从 而 开发 客户 端的 应 用 程序 等 。 
它 是 通过 肉 入 或 调和 到 标准 的 HTML 语言 中 实现 的 。 它 的 出 现 弥补 了 HTML 语言 的 缺 
陷 , 是 Java 与 HTML 的 折 囊 选择 。 

JavaScript 是 一 种 脚本 语言 , 它 采 用 小 程序 段 的 方式 实现 编程 。 像 其 他 脚本 语言 一 样 ， 
JavaScript 同样 也 是 一 种 解释 性 语言 , 它 提 供 了 一 个 简易 的 开发 过 程 。 它 的 基本 结构 形式 
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与 C、.C++ 等 类 似 ,但 它 不 像 这 些 语言 一 样 需要 先 编译 ,而 是 在 程序 运行 过 程 中 被 逐 行 地 解 
释 。 它 与 HTML 标识 结合 在 一 起 ,从 而 方便 用 户 的 使 用 操作 。 

JavaScript 是 一 种 基于 对 象 的 语言 ,同时 可 以 看 做 是 一 种 面向 对 象 的 开发 语言 。 这 意 
味 着 它 能 运用 自己 已 经 创建 的 对 象 。 

JavaScript 的 简单 性 主要 体现 在 : 首先 它 是 一 种 基于 Java 基本 语句 和 控制 流 之 上 的 简 
单 而 紧凑 的 设计 ,从 而 对 学 习 Java 是 一 种 非常 好 的 过 渡 , 其 次 它 的 变量 类 型 是 采用 弱 类 型 ， 
并 未 使 用 严格 的 数据 类 型 。 

JavaScript 是 一 种 安全 性 语言 , 它 不 允许 访问 本 地 的 硬盘 ,并 不 能 将 数据 存 入 到 服务 
器 ,不 允许 对 网 络 文档 进行 修改 和 删除 ,只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 。 从 而 有 
效 防止 数据 丢失 。 

JavaScript 是 动态 的 , 它 可 以 直接 对 用 户 或 客户 输入 作出 响应 ,无 须 经 过 Web 服务 程 
序 。 它 对 用 户 的 响应 ,是 采用 事件 驱动 的 方式 进行 的 。 比 如 按 下 鼠标 、 移 动 窗口 .选择 菜单 
等 都 可 以 视 为 事件 。 当 事件 发 生 后 ,可 能 会 引起 响应 。 

JavaScript 是 依赖 浏览 器 本 身 , 与 操作 环境 无 关 , 只 要 支持 JavaScript 的 浏览 器 就 可 以 
正确 执行 。 从 而 实现 了 "编写 一 次 , 走 遍 天 下 ?的 梦想 。 

2. Dojo 简介 

Dojo 是 一 个 强大 的 面向 对 象 JavaScript 框架 。 主要 由 三 大 模块 组 成 : Core, Dijit、 
DojoX。 其 中 Core 提供 Ajax, events, packing, CSS-based qrerying, animation, JSON 等 相 
关 操 作 API Dijit 是 一 个 可 换 皮 肤 ,基于 模板 的 Web UI 控 件 库 。DoioX 包括 一 些 创 新 /新 
颖 的 代码 和 控件 : DataGrid、charts、 离 线 应 用 、 跨 浏览 器 矢量 绘图 等 。 

Dojo 的 特点 可 以 从 以 下 几 部 分 说 起 : 

A) Dojo 是 一 个 纯 JavaScript JE ,后 台 只 要 提供 相应 的 接口 就 能 够 将 数据 以 Json 的 格 
式 输出 给 前 台 。 

(2) Dojo 自身 定义 了 完整 的 函数 库 , 屏 项 了 浏览 器 的 差异 。 

(3) Dojo 自身 定义 了 界面 组 件 库 ,其 组 件 代 码 采 用 了 面向 对 象 的 思想 ,便于 继承 及 
扩展 。 

(4) 当 对 前 端 界面 联动 需求 较为 复杂 的 时 候 ,基于 Dojo 的 页 面 组 件 将 是 首选 ,因为 它 
可 以 将 界面 中 某 一 个 具有 共性 的 区 域 抽象 出 来 ,封装 这 一 区 域 的 界面 行为 以 及 数据 ,可 以 用 
搭 积木 的 方式 完成 复杂 页 面 的 开发 。 

3. REST 简介 

REST( Representational State Transfer) 是 Roy Fielding 博士 于 2000 年 在 他 的 博士 论 
文中 提出 来 的 一 种 软件 架构 风格 。REST 本 身 并 不 涉及 任何 新 技术 , 它 基 于 HTTP 协议 ， 
比 SOAP 和 XML-RPC 更 加 简洁 、 高 效 ,现在 越 来 越 多 的 大 型 网 站 正在 使 用 REST 风格 来 
设计 和 实现 。 

REST 最 突出 的 特点 就 是 用 URL 来 描述 互联 网 上 的 所 有 资源 ,Roy Fielding 博士 通过 
观察 互联 网 的 运作 方式 对 其 进行 了 抽象 ,他 认为 : 设计 良好 的 网 络 应 用 表现 为 一 系列 的 虚 
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拟 * 网 页 ”, 或 者 说 这 些 虚拟 网 页 就 是 资源 状态 的 表现 (Representation); 用 户 选 择 这 些 链接 
导致 下 一 个 虚拟 的 “网 页 ”传输 到 用 户 端 展现 给 使 用 的 人 ,而 这 正 代 表 了 资源 状态 的 转发 
(State Transfer), 

REST 主要 有 以 下 特点 : 

(1) 资源 通过 URL 来 指定 和 操作 ; 

(2) 对 资源 的 操作 包括 获取 、 创 建 、 修 改 和 删除 ,这 些 操作 正好 对 应 HTTP 协议 提供 的 
GET,POST,PUT fll DELETE 方法 ; 

(3) 连接 是 无 状态 的 ; 

(4) 能 够 利用 Cache 机 制 来 提高 性 能 。 

4. JSON 简介 

使 用 REST API 进行 信息 传输 的 时 候 , 有 必要 了 解 其 数据 传输 格式 ,这 种 格式 称 为 
JSON(JavaScript Object Notation) 。 

JSON 是 一 种 轻 量 级 的 数据 交换 格式 ,易于 阅读 和 编写 。JSON 能 够 描述 四 种 简单 的 类 
型 (字符 串 数字 ,布尔 值 .null) 和 两 种 结构 化 类 型 (对 象 和 数组 ) 。JSON 对 象 由 一 对 大 括号 
包围 着 零 个 或 多 个 Key/Value 对 (或 者 是 成 员 ). Key 是 String 类 型 的 ,每 个 Key 后 面 跟 一 
个 冒号 ,把 Key 与 Value 分 开 , 喜 号 则 隔 开 紧 跟 在 其 后 的 另 一 个 Key。 下 面 就 是 JSON 对 象 
的 例子 : 

var lods = [ 
"level": 0, "resolution": 0.010986328125, "scale": 4617149.97766929 }, 
"level": 1, "resolution": 0.0054931640625, "scale": 2308574.98883465 }, 
"level": 2, "resolution": 0.00274658203125, "scale": 1154287.49441732 }, 


"level": 3, "resolution": 0.001373291015625, "scale": 577143.747208662 }, 
"level": 4, "resolution": 0.0006866455078125, "scale": 288571.873604331 } 


+ 


5.4.2 ArcGIS API for JavaScript 实现 编辑 功能 


1. 加 载 一 张 底 图 

前 面 已 经 介绍 了 如 何 使 用 ArcMap 连接 数据 库 , 并 在 数据 库 中 添加 数据 ,再 将 数据 以 服 
务 的 形式 发 布 到 Server, 为 了 可 以 将 之 前 发 布 的 要 素 服 务 以 要 素 层 的 形式 添加 到 地 图 中 , 先 
在 程序 中 加 载 一 张 底 图 。 首 先 新 建 一 个 工程 ,在 根 目录 下 新 建 style js 两 个 文件 夹 , 然 后 新 
建 一 个 文件 为 index. html 作为 首页 。 在 style 中 主要 放置 样式 文件 ,在 js 中 主要 放置 
JavaScript 脚本 文件 。 先 在 js 文件 中 新 建 一 个 名 为 main. js 的 脚本 文件 ,并 编辑 内 容 如 下 : 


var map; 
require(["esri/map", "dojo/domReady!"], function (Map) ( 
map = new Map("mapDiv", { 
center: [120. 033325, 30.228405], // 设 置 初始 中 心经 纬度 
zoon: 11, // 设 置 初始 缩放 界 别 
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basemap: "gray" // 设 置地 图 类 型 


在 本 文件 中 ,首先 定义 了 一 个 map 全 局 变量 ,因为 地 图 对 象 可 能 在 其 他 脚本 文件 中 被 
引用 。Require 函数 的 作用 是 加 载 需 要 的 模块 ,详细 说 明 会 在 之 后 的 小 节 中 展开 。 在 主 函 
数 体 中 实例 化 了 一 个 map 对 象 实现 对 id 为 mapDiv 的 DIV 层 的 地 图 加 载 显 示 。 

然后 在 文件 夹 style 下 创建 一 个 名 为 main. css 的 文件 ,并 编辑 内 容 如 下 : 


html, body, #mapDiv { 
padding: 0; 
margin: 0; 
height: 100% ; 

} 


在 样式 文件 中 主要 是 对 html body 和 mapDiv 做 了 样式 定义 ,主要 设置 了 内 外 边 距 为 
0, 并 将 高 度 适应 为 浏览 器 的 高 度 。 现 在 ,样式 文件 和 脚本 文件 都 已 经 添加 完毕 了 ,继续 编辑 
index. html 完成 最 后 的 工作 ,编辑 该 文件 内 容 如 下 : 


«! DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
« title» Arcgis for javascri[t </title> 
<! -- 设 置 网 页 初始 大 小 ,并 禁止 用 户 进行 缩放 -一 > 
<meta name = "viewport" content = "initial- scale- 1, maximum - scale- 1, user ~ scalable = no"> 
<! -- 引 入 Arcgis 的 css 文件 --> 
< link rel = "stylesheet" href = "http: //js. arcgis. com/3. 12/esri/css/esri.css"> 
<! -- 引 入 main. css -- > 
< link rel = "stylesheet" type = "text/css" href = "style/main. css"> 
<! — 5| A Arcgis 的 JavaScript 脚本 --> 
< script src = "http://js.arcgis. com/3.12/"></script > 
<! -—- 8| À main. js --> 
< script src = "js/main. js"></script > 
</head> 
< body class = "claro"> 
<div id= "mapDiv"></div> 
</body> 
</html> 


在 index. html 文件 中 主要 加 载 了 ArcGIS 提供 了 在 线 样式 和 脚本 和 之 前 定义 的 main. 


js 和 main. ess 文件 ,其 中 二 div id=" mapDiv" > </div> K 9k 4) t6 (6 2g Eel Sos. TAFX 
览 器 效果 如 图 5. 4-1 所 示 。 
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图 5.4-1 显示 一 张 底 图 


2. 脚本 库 文件 本 地 部 署 

前 面 已 经 讲解 了 如 何 通过 调用 在 线 的 ArcGIS for JavaScript 显示 一 张 底 图 ,因为 浏览 
器 需要 远程 加 载 脚本 代码 ,打开 速度 会 比较 慢 , 而 且 开发 应 用 总 是 希望 能 把 文件 部 署 的 位 置 
掌握 在 开发 者 手中 。 所 以 在 进一步 讲解 开发 过 程 之 前 先 把 在 线 的 库 文件 移植 到 本 地 。 首 先 
访问 http://links. esri. com/javascript-api/latest-download. 下 载 ArcGIS for JavaScript 
SDK ,解压 后 可 以 看 到 在 arcgis_js_api>library>3. 9 文件 下 主要 包含 3. 9 和 3. 9compact 
两 个 文件 夹 ,这 个 两 个 文件 夹 中 分 别 包 含 了 开发 版 的 SDK 和 压缩 版 的 SDK. 

另外 两 个 文件 install 和 install linux 分 别 是 Windows 和 Linux 下 的 SDK 安装 指南 ， 
两 者 的 部 署 没 有 太 大 的 差别 ,主要 工作 是 替换 init. js 和 dojo. js 两 个 文件 下 的 脚本 所 在 服 
务 器 的 URL。 假 设 将 arcgis_js_api 文件 部 署 到 localhost:8080/source 访问 的 路 径 下 ,以 配 
置 压缩 版 的 SDK 为 例 ,具体 配置 的 方法 如 下 : 

(1) 打开 arcgis js api library—3. 9—3. 9compact 下 的 init. js; 将 一 myserver 二 替换 
为 localhost:8080/source; 

(2) 打开 arcgis js api— library > 3. 9— 3. 9compact — dojo —> dojo > dojo. js, 将 
一 myserver 二 替换 为 localhost: 8080/source, 

通过 以 上 配置 ,就 可 以 在 加 载 本 地 SDK 脚本 时 正确 寻找 到 本 地 文件 路 径 了 。 

3. 使 用 本 地 地 图 服务 

在 线 的 底 图 调用 虽然 很 方便 ,但 很 多 时 候 因为 网 络 的 限制 或 者 系统 开发 需求 的 要 求 
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需要 使 用 自己 发 布 的 地 图 服务 ,本 节 把 地 图 的 底 图 
修改 为 之 前 发 布 的 道路 地 图 服务 。 在 浏览 器 输入 


Services: 


* basemap (FeatureServer) 


http://localhost: 6080/arcgis/rest/services 进入 服 s ccn seed 
* SampleWorldCities (MapServer) 

务 列表 ,如 图 5. 4-2 所 示 , 单 击 basemap 的 要 素 服务 链 E 

接 basemap(MapServer) 可 以 获取 要 素 服务 的 URL 地 5.4-2 查看 服务 URL 


址 http://localhost ; 6080/arcgis/ rest/ services/ basemap/ 
MapServer. 


编辑 main. js. EMM FP : 


var map; 
require([ 
"esri/map", 
"esri/layers/ArcGISTiledMapServiceLayer", 
"dojo/donReady! " 
l, 
function (Map, ArcGISTiledMapServiceLayer) { 
map = new Map("mapDiv", { 


center: [120. 033325, 30.228405], // 设 置 初始 中 心经 纬度 
zoon: 14, // 设 置 初始 缩放 界 别 
basemap: "gray" // 设 置地 图 类 型 


layer = new esri. layers. ArcGISDynamicMapServiceLayer ( " http://localhost: 6080/ 
arcgis/rest/services/basemap/MapServer"); 
map. addLayer(layer); 

H; 

该 文件 中 通过 esri. layers. ArcGISDynamicMapServiceLayer() 初 始 化 了 新 的 图 层 ,并 
通过 map 对 象 的 addLayer() 方 法 将 此 图 层 添加 到 地 图 上 。 重 新 刷新 页 面 可 以 看 到 ,在 原来 
底 图 的 基础 上 新 添加 了 一 层 道路 图 层 , 如 图 5. 4-3 所 示 。 

4. 加 载 要 素 图 层 

前 面 介绍 的 图 层 是 基于 栅 格 图 的 原理 加 载 的 ,并 不 能 对 地 图 上 的 单个 对 象 进行 操作 ,无 
法 满足 实际 应 用 中 对 地 图 的 内 容 进行 选择 和 编辑 的 需求 ,矢量 图 层 可 以 用 于 解决 这 个 问题 ， 
矢量 图 层 中 显示 的 个 体 对 象 都 是 经 过 实例 化 的 ,可 以 通过 前 端 脚本 进行 相应 的 处 理 ,继续 在 
原先 的 基础 上 县 加 一 层 显示 点 要 素 的 矢量 层 。 首 先 通过 ArcMap 发 布 新 的 点 要 素 服务 到 
ArcGIS Server 中 ,因为 之 前 已 经 讲解 过 如 何 发 布 服务 ,所 以 这 里 不 再 展开 讲解 。 然 后 , 编 
辑 main. js 内 容 , 在 其 中 添加 要 素 服务 图 层 的 加 载 , 编 辑 后 的 文件 如 下 : 


var map; 
require([ 
"esri/map", 
"esri/layers/Featurelayer", 
"dojo/donReady! " 
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] 


, function (Map，FeatureLayer) { 


map = new Map("mapDiv", { 


center: [120. 033325, 30.228405], // 设 置 初始 中 心经 纬度 
zoom: 12, // 设 置 初始 缩放 界 别 
basemap: "gray" // 设 置地 图 类 型 

n 

// 添 加 图 层 


var layer = new esri.layers. ArcGISDynamicMapServiceLayer 


( 


"http://localhost :6080/arcgis/rest/services/basemap/MapServer" ) ; 


map. addLayer( layer) ; 

// 添 加 矢量 图 层 

var points = new FeatureLayer ( " http://localhost: 6080/arcgis/rest/services/MyMapService/ 
FeatureServer/0", ( 


) 


) 


map. addLayer(points); 


5.43 ”全 加 一 层 新 图 层 


首先 ,在 require 中 引入 featureLayer 的 模块 ,只 有 在 引用 了 该 模块 后 才 可 以 在 函数 体 
中 使 用 相关 功能 ,具体 添加 矢量 图 层 的 方法 和 普通 图 层 的 方法 基本 一 致 ,主要 是 通过 new 
FeatureLayer() 方 法 初始 化 一 个 矢量 图 层 对 象 ; 然后 通过 map 的 addLayer() 方 法 将 图 层 添 


加 到 底 图 


上 ,最 终 显示 效果 如 图 5. 4-4 所 示 , 可 以 看 到 在 原来 道路 的 基础 上 显示 很 多 代表 建 


筑 位 置 的 点 。 


第 5 章 ArcGIS for Server 网 络 地 图 应 用 开发 P 143 


图 5.4-4 添加 矢量 图 层 


5. AMD 模块 化 编程 
前 面 已 经 讲解 了 如 何 显示 加 载 在 线 底 图 或 者 自己 发 布 的 地 图 服务 ,通过 上 面 的 例子 可 
以 发 现 ArcGIS 的 基本 编程 方法 总 是 以 下 面 的 形式 展开 : 
require([ 
BRB, 
' 异 块 Bv 
], function (模块 A, 模块 B) ( 
// 使 用 模块 A 和 模块 B 进行 相应 的 业务 处 理 
n; 
这 么 写 的 原因 是 ArcGIS for JavaScript 是 以 模块 化 编程 的 思想 设计 的 。 在 大 型 的 Web 
项 目 中 ,脚本 的 数量 可 能 多 达 几 十 个 ,甚至 是 数 百 个 之 多 ,特别 是 在 复杂 的 单 页 GIS 应 用 中 
脚本 是 支撑 起 前 台 交互 的 基础 。 而 在 实际 的 应 用 场景 中 ,每 个 脚本 都 不 会 是 独立 存在 而 是 
相互 依赖 的 ,比如 也 模块 中 可 能 会 调用 到 C 模块 ,而 C 模块 中 又 可 能 使 用 了 A 模块 中 的 功 
能 , 当 功能 模块 达到 一 定数 量 级 时 , 靠 人 工 通 过 scitpt 标签 引入 脚本 文件 将 变 得 十 分 困难 ， 
所 以 AMD 模块 化 编程 的 思想 被 提 了 出 来 , 它 可 以 很 好 地 解决 模块 依赖 的 问题 ,并 且 将 系统 
的 各 个 业务 拆 分 成 低 耦 合 的 独立 部 分 ,利于 后 期 的 开发 和 维护 。 
在 实际 的 GIS 开发 中 ,使 用 模块 化 的 思想 去 编写 程序 对 于 系统 开发 有 很 大 的 好 处 , 编 
写 模块 的 基本 方法 如 下 : 
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define([ 
' 依 赖 的 模块 ' 
], function (依赖 的 模块 名 ){ 
// 这 里 可 以 编写 其 他 模块 引用 该 模块 时 直接 执行 的 内 容 
return { // 返 回 值 中 的 函数 不 会 被 自动 执行 ,需要 调用 


'testFunction ': function (){ 
// 一 个 测试 方法 
) 


} 
n; 


这 里 假设 上 面 的 模块 名 为 moduleA, 如 果 要 编写 一 个 依赖 moduleA 的 新 的 模块 
moduleB, 可 以 通过 以 下 方法 实现 : 


define([ 
'moduleA' 
], function (moduleA) { 
moduleA. testFunction (); // 执 行 noduleA 中 的 testFunction 方法 
} 
n; 


除了 上 面 编写 模块 的 方法 之 外 ,因为 ArcGIS for JavaScript 是 基于 Dojo 框架 编写 的 ， 
它 还 允许 创建 自己 的 模块 类 ,以 模块 的 形式 创建 自己 的 类 的 基本 方法 如 下 : 


define([ 
"依赖 的 模块 ' 
], function (依赖 的 模块 名 ){ 
return declare(null, ( 
testFunction : function (){ // 一 个 类 成 员 方法 
} 
}) 
n; 


从 上 面 的 例子 可 以 看 到 ,编写 一 个 类 的 方法 和 编写 一 个 普通 模块 的 方法 的 主要 区 别 是 
在 于 前 者 返回 值 中 用 一 个 declare 方法 将 返回 值 包 庄 了 起 来 。 假 设 这 个 类 的 命 为 class 人 ,在 
其 他 模块 中 引用 这 个 模块 的 方法 如 下 : 


define([ 
'classA' 
], function (classA)( 
var test - new classA(); //new 一 个 对 象 
test. testFcuntion(); // 调 用 对 象 的 testFunction 方法 
) 
n; 


6. 编写 一 个 要 素 编辑 模块 
在 之 前 添加 的 要 素 图 层 的 基础 上 ,以 模块 化 编程 的 方法 实现 一 个 用 于 编辑 要 素 层 的 功 
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。 首 先 在 main. js 中 删除 之 前 添加 要 素 层 的 代码 ,要 素 图 层 的 初始 化 工作 将 被 整合 到 新 
的 模块 中 。 

为 了 能 够 在 主 界面 上 显示 编辑 菜单 ,需要 继续 对 index. html 文件 进行 修改 ,在 原先 的 
基础 上 增加 一 个 侧 栏 ,具体 修改 后 的 文件 内 容 如 下 : 


<! DOCTYPE html > 

<html> 

<head> 

<meta charset = "utf - 8"> 

<title>Arcgis for javascri[t</title> 

<! -- 设 置 网 页 初始 大 小 ,并 禁止 用 户 缩放 -一 > 

<meta name = "viewport" content = "initial- scale= 1l, maximum - scale = 1, user- scalable = no"> 

«! — Arcgis --> 

< link href = "http://192.168. 0. 107/source/arcgis/arcgis js api/library/3.9/3.9compact/js/ 
esri/css/esri.css" rel- "stylesheet" type- "text/css" /» 

< link href = "http://192.168.0.107/source/arcgis/arcgis js api/library/3.9/3.9compact/js/ 
dojo/dijit/themes/claro/claro.css" rel = "stylesheet" type = "text/css" /> 

<script type = " text/javascript" src = "http://192. 168. 0. 107/source/arcgis/arcgis js api/ 
library/3.9/3.9conpact/init. js"></script > 

<! -- 8| A main. css -一 > 

< link rel = "stylesheet" type = "text/css" href = "style/main. css"> 

<! -- 8| A main. js--> 

<script src = "js/main. js"></script > 

</head> 

< body class = "claro"> 
<div id = "mapDiv"></div> 
<div class = "sidebar"> 

< h2 > 编辑 栏 </h2 > 

<div id= "templateDiv"></div> 

<div id = "editorDiv"></div> 
</div> 

</body> 

«/htnl» 


在 index. html 文件 中 主要 添加 了 class 为 sidebar 的 div 标签 ,并 在 其 中 添加 了 id 分 别 
为 templateDiv 和 editorDiv 的 div 标签 ,它们 分 别 将 用 于 初始 化 要 素 图 例 列表 和 编辑 菜单 。 
继续 修改 main. css 文件 ,为 侧 栏 添加 简单 的 样式 如 下 : 


html, body, #mapDiv { 


a ORE 


A 


padding: 0; 
margin: 0; 
height: 100%; 

} 

div{ 


box- sizing: border — box; 
—moz — box — sizing: border — box; /* Firefox * / 
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— webkit- box- sizing:border- box; /* Safari * /} 
* mapDiv( 

width :70% ; 

float:left; 
} 
. sidebar{ 

width :29.8%; 

height:100 % ; 

float: right; 

border - left:2px #ccc solid; 
} 
. sidebar . title{ 

padding: 20px; 

font — size: 18px; 

background: # f2f2f2; 

border - bottom: lpx # eee solid; 
} 


刷新 浏览 器 ,查看 页 面 效 果 , 可 以 看 到 在 地 图 的 右 侧 添加 了 一 个 空白 的 编辑 栏 ,如 
图 5.4-5 所 示 。 


5.4-5 为 地 图 添加 一 个 侧 栏 


到 目前 为 止 , 侧 栏 的 添加 工作 已 经 完成 。 继 续 编写 功能 实现 模块 ,首先 在 js 文件 夹 下 
新 建 一 个 名 为 LayerEdit. js 的 文件 ,在 该 文件 中 将 定义 一 个 用 于 矢量 图 层 加 载 和 实现 相关 
编辑 功能 的 模块 ,编辑 内 容 如 下 : 
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define([ 

"esri/map", 

"esri/tasks/GeonetryService", 

"esri/toolbars/edit", 

"esri/layers/ArcGISTiledMapServicelayer" , 

"esri/layers/FeatureLayer", 

"esri/Color", 

"esri/synbols/SimpleMarkerSymbol", 

"esri/synbols/SimpleLineSymbol", 

"esri/dijit/editing/Editor", 

"esri/dijit/editing/TemplatePicker", 

"esri/config", 

"dojo/il8n! esri/nls/jsapi", 

"dojo/ base/array", "dojo/parser", "dojo/keys", 

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", 

"dojo/donReady! " 

], function ( 

Map, GeometryService, Edit, 
ArcGISTiledMapServiceLayer, FeatureLayer, 
Color, SimpleMarkerSymbol, SimpleLineSymbol, 
Editor, TemplatePicker, 
esriConfig, jsapiBundle, 
arrayUtils, parser, keys 

X 

parser. parse(); 

var points; 

var init = function ()( 
initLayer(); 
map. on(" layers - add - result", initTemplatePicker) ; 

} 

var initLayer = function (){ 

// 添 加 矢量 图 层 
points = new FeatureLayer ( " http://192. 168. 0. 107: 6080/arcgis/rest/services/ 
MyMapService/FeatureServer/0", ( 
Di 
map. addLayers([points]); 


) 
// 初 始 化 一 个 要 素 列表 
var initTemplatePicker = function (evt) { 
console.log('init edit'); 
var templateLayers = arrayUtils.map(evt. layers, function (result) { 
return result. layer; 
DE 
var templatePicker = new TenplatePicker(( 
featureLayers: templateLayers, 
grouping: true, 
rows: "auto", 
columns: 3 
), "templateDiv") ; 
templatePicker. startup(); 
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initEditor(evt, templatePicker); 
} 
// 初 始 化 编辑 功能 
var initEditor = function (evt, templatePicker)( 
console. log( 'initEditor'); 
var layers = arrayUtils.map(evt.layers, function (result) { 
return ( featureLayer: result. layer }; 
Di 
var settings - ( 
map: map, 
templatePicker: templatePicker, 
layerInfos: layers, 
toolbarVisible: true, 
createOptions: { 
polylineDrawTools:[ Editor. CREATE TOOL FREEHAND POLYLINE ], 
polygonDrawTools: [ Editor. CREATE TOOL FREEHAND POLYGON, 
Editor.CREATE TOOL CIRCLE, 
Editor.CREATE TOOL TRIANGLE, 
Editor.CREATE TOOL RECTANGLE 
] 
n 
toolbarOptions: { 
reshapeVisible: true 
) 
}; 
var params = {settings: settings}; 
var myEditor = new Editor(params, 'editorDiv'); 
//define snapping options 
var symbol = new SimpleMarkerSymbol( 
SimpleMarkerSymbol. STYLE CROSS, 
15, 
new SimpleLineSymbol ( 
SimpleLineSymbol. STYLE_SOLID, 
new Color([255, 0, 0, 0.5]), 


) 
myEditor.startup(); 
} 
return { 
init: init 
} 
DE 


继续 修改 main. js 文件 ,在 该 文件 中 引入 这 个 模块 并 执行 初始 化 方法 ,编辑 后 的 文件 
WF: 


var map; 
dojo. registerModulePath ('pack', window. location + '/js/'); // 模 块 路 径 
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require([ 
"esri/map", 
"esri/layers/FeatureLayer", 
"pack/LayerEdit", 
"dojo/donReady! " 
], function (Map, FeatureLayer, LayerEdit) { 
map = new Map("mapDiv", { 


center: [120.033325, 30.228405], // 设 置 初始 中 心经 纬度 
zoon: 12, // 设 置 初始 缩放 界 别 
basemap: "gray" // 设 置地 图 类 型 

n»; 

// 添 加 图 层 


var layer = new esri. layers. ArcGISDynamicMapServiceLayer("http://192.168.0.107:6080/ 
arcgis/rest/services/basemap/MapServer" ) ; 
map. addLayer( layer); 
LayerEdit. init(); 
n; 
在 该 文件 中 ,首先 通过 dojo. registerModulePath ('pack', window. location 十 '/js/» iE 
册 了 一 个 模块 路 径 ,因为 dojo 通常 是 从 自身 的 根 路 径 开 始 寻 找 对 应 的 模块 ,但 在 实际 工程 
中 通常 会 把 模块 放置 在 自己 的 文件 夹 下 ,所 以 需要 通过 注册 自 定义 模块 路 径 实现 自 定义 模 
块 的 加 载 , 否 则 会 出 现 无 法 找到 相应 模块 文件 的 错误 。 最 后 通过 调用 LayerEdit 的 init O77 


ev elBle~ alii 


图 5.4-6 侧 栏 最 终 显 示 效 果 
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从 图 中 可 以 看 到 , 侧 栏 中 显示 了 当前 加 载 的 要 素 图 层 的 图 例 以 及 一 个 具有 基本 编辑 功 
能 的 菜单 。 现 在 来 测试 一 下 相应 的 编辑 功能 。 单 击 地 图 任意 要 素 点 ,可 以 弹出 图 5. 4-7 所 
示 的 对 话 框 。 


图 5.4-7 要 素 属性 对 话 框 


因为 目前 实现 的 功能 比较 单一 ,同时 要 素 也 没有 额外 的 附加 属性 ,所 以 只 显示 了 一 个 删 
除 功能 ,在 实际 的 系统 开发 中 可 以 利用 该 对 话 框 实现 复杂 的 属性 编辑 功能 ,比如 基本 属性 的 
设置 以 及 附件 的 上 传 管理 。 

通过 多 选 地 图 对 象 可 以 实现 批量 删除 操作 功能 ,如 图 5. 4-8 所 示 。 单 击 侧 栏 中 的 图 例 
可 以 在 地 图 上 添加 相应 的 图 例 对 象 , 如 图 5. 4-9 所 示 。 


编辑 栏 


points.sde.building 


图 5.4-8 批量 选择 地 图 要 素 对 象 图 5. 4-9 绘制 要 素 对 象 


5.4.3 ArcGIS API for JavaScript 实现 打印 功能 


地 图 打印 功能 主要 用 到 了 ArcGIS for JavaScript 中 的 esri/digit/Print 模块 ,该 模块 可 
以 提供 打印 默认 图 层 或 者 自 定义 图 层 的 功能 。 打 印 控件 可 以 显示 单个 按钮 或 者 包含 图 层 列 
表 的 组 合 按钮 。 当 用 户 单 击 打印 按钮 时 会 跳 转 到 新 的 窗口 并 显示 出 打印 的 结果 。 此 外 ,该 
功能 需要 ArcGIS Server 10. 1 或 者 以 上 版 本 的 支持 。 它 的 基本 使 用 方法 如 下 : 


require(["esri/dijit/Print"], function(Print) { 

printer = new Print(( 

map: map, 

url: " http://sampleserver6. arcgisonline. com/arcgis/rest/services/Utilities/ 
PrintingTools/GPServer/Export * 20Web % 20Map % 20Task" 
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}, dom. byId("printButton")); 
printer. startup(); 
n 


首先 ,通过 require 引入 Print 模块 ,然后 实例 化 Print 对 象 再 调用 它 的 startup() 方 法 ， 
其 中 的 url 为 ArcGIS Server 的 打印 服务 。 完 整 的 示例 如 下 : 


<! DOCTYPE html > 
<html> 
<head> 
<meta charset = "utf - 8"> 
<meta name = "viewport" content = "initial - scale=1, maximum — scale = 1,user - scalable = no"> 
<title></title> 
< link rel = "stylesheet"href = "http: //jsapi. thinkgis. cn/dijit/themes/nihilo/nihilo.css"> 
< link rel = "stylesheet" href = "http: //jsapi. thinkgis. cn/esri/css/esri.css"> 
<style> 
html, body { 
height: 100 * ; width: 100% ; 
margin: 0; padding: 0; 
} 
body{ 
background-color: # fff; overflow: hidden; 
font - family: sans - serif; 
} 
label { 
display: inline- block; 
padding: 5px 5px 0 5px; 
font- weight: 400; 
font - size: 12pt; 
i 
. button { 
width: 100%; 
margin: 3px auto; 
text-align: center; 
} 
# header { 
padding-top: 4px; 
padding - right: 15px; 
color: #444; 
font- size:16pt; text — align:right; font — weight :bold; 
height :55px; 
background: # fff; 
border - bottom: 1px solid #444; 
i 
# subheader { 
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font  size:small; 
color: #444; 
text — align: right; 

padding - right :20px; 


} 


# rightPane( 
margin: 0; 
padding: 10px; 
background-color: # fff; 
color: #421b14; 
width: 180px; 


.ds { background: #000; overflow 


s ds - h div { width: 100%; ) 

#ds-ldiv, &ds- r div ( height: 100%; } 
#ds-r div ( right: 0; } 

alpha(opacity= 10); opacity: .1; 


5 ds 
#ds 
#ds 
#ds 
#ds 
#ds 
#ds 
#ds 
#ds 
# ds 


#ds 
#ds 


.ol ( filter: 
.02 ( filter: 
.03 ( filter: 
.04 ( filter: 
.05 ( filter: 
.hl ( height: 
.h2 ( height: 
.h3 ( height: 
-h4 { height: 
.h5 ( height: 
ds. 
ds. 
ds. 


v1 ( width: 
v2 ( width: 
v3 ( width: 
.v4 ( width: 
.v5 ( width: 


alpha(opacity = 8); opacity: 
alpha(opacity= 6); opacity: 
alpha(opacity= 4); opacity: 
alpha( opacity = 2); opacity: 


1px; } 
2px; } 
3px; } 
4px; } 
5px; } 
1px; } 
2px; } 
3px; } 
4px; } 
Spx; } 


/ * make all dijit buttons the same width * / 
.dijitButton .dijitButtonNode, #drawingWrapper, # printButton ( 
width: 160px; 


} 


.esriPrint { 
padding: 0; 


i 
</style> 


: hidden; position 


.08; 
.06; 
.04; 
.02; 


: absolute; z - index: 2; } 


< script src = "http: //jsapi. thinkgis. cn/init. js"></script > 


«script» 


verapp = (); 
app.map - null; app.toolbar - null; app.tool - null; app.symbols 


= null; 


null; app. printer 
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require([ 
"esri/map", "esri/toolbars/draw", "esri/dijit/Print", 
"esri/layers/ArcGISTiledMapServicelayer", "esri/layers/ArcGISDynamicMapServiceLayer", 
"esri/layers/LayerDrawingOptions", 
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", 
"esri/synbols/SimpleFillSymbol", "esri/graphic", 
"esri/renderers/ClassBreaksRenderer" , 
"esri/config", 
"dojo/ base/array", "esri/Color", "dojo/parser", 
"dojo/query", "dojo/don", "dojo/donm - construct", 
"dijit/form/CheckBox", "dijit/form/Button", 


"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/donReady!" 
], function( 

Map, Draw, Print, 

ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, 

LayerDrawingOptions, 

SimpleMarkerSymbol, SimpleLineSymbol, 

SimpleFillSymbol, Graphic, 

ClassBreaksRenderer, 

esriConfig, 

arrayUtils, Color, parser, 

query, dom, domConstruct, 

CheckBox, Button 
)t 


parser.parse(); 
esriConfig.defaults.io.proxyUrl - "/proxy/"; 


app.map 7 new Map("map", ( 
center: [ - 90.733, 30.541], 
zoom: 8 
DE 
app. map. on("load", function() { 
app.toolbar - new Draw(app.map); 
app. toolbar. on(" draw - end", addToMap) ; 
n; 
app. printer = new Print({ 
map: app. map, 
url: " http://sampleserver6. arcgisonline. com/arcgis/rest/services/Utilities/ 
Print ingTools/GPServer/Export * 20Web % 20Map % 20Task" 
}, dom. byId("printButton")); 
app. printer. startup() ; 
var url = "http://services. arcgisonline. com/ArcGIS/rest/services/Ocean Basemap/ 
MapServer"; 
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var tiledLayer = new ArcGISTiledMapServiceLayer(url, { "id": "Ocean" }); 
app. map. addLayer(tiledLayer); 
var layer = new ArcGISDynamicMapServicelayer ( " http: //sampleserver6. arcgisonline. 
con/arcgis/rest/services/USA/MapServer", { 
id: "County Population", 
opacity: 0.5 
D 
layer. setVisibleLayers([3]); 
var layerDefs - []; 
layerDefs[3] = "state name = 'Louisiana'"; 
layer. setLayerDef initions(layerDefs); 
var renderer - new ClassBreaksRenderer(null, "pop2000"); 
var outline = new SimpleLineSymbol("solid", new Color([0,0,0,0.5]), 1); 
var colors = [ 
new Color([255,255,178,0.5]), 
new Color([254,204,92,0.5]), 
new Color([253,141,60,0.5]), 
new Color([240,59,32,0.5]), 
new Color([189,0,38,0.5]) 
E 
renderer.addBreak(0, 20000, new SimpleFillSymbol("solid", outline, colors[0])); 
renderer.addBreak(20000, 50000, new SimpleFillSymbol("solid", outline, colors[1])); 
renderer.addBreak(50000, 100000, new SimpleFillSymbol("solid", outline, colors[2])); 
renderer.addBreak(10000, 1000000, new SimpleFillSymbol("solid", outline, colors[3])); 
renderer.addBreak(1000000, 10000000, new SimpleFillSymbol("solid", outline, colors[4])); 
var drawingOptions - new LayerDrawingOptions(); 
drawingOptions.renderer - renderer; 
var optionsArray 7 []; 
optionsArray[3] = drawingOptions; 
layer. setLayerDrawingOptions(optionsArray); 
app. map. addLayer( layer) ; 
arrayUtils. forEach(["County Population", "Ocean"], function(id) { 
new CheckBox( { 
id: "cb_" + id, 
name: "cb " + id, 
checked: true, 
onChange: function(bool) { 
bool? 
app. map. getLayer(this. id. split("_")[1]).show() : 
app. map. getLayer(this. id. split(" ")[1]).hide(); 
) 
), donConstruct.create("input", { 
id: "lyr " + id 
))). placeAt(don. byId("layerToggle")); 


IN 
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// create a label for the check box 
var label = donConstruct.create( label', { 
"für": "cb " + id, 
"innerHTML": id 
Di 
domConstruct.place(label, dom. byId("layerToggle")); 
donConstruct. place(domConstruct. create("br"), dom. byId("layerToggle")); 
Di 
// set up symbols for the various geometry types 
app. symbols = {}; 
app. symbols. point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol ( ), 
new Color([0, 255, 0, 0.75])); 
app. symbols. polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2); 
app. symbols. polygon = new SimpleFillSymbol().setColor(new Color([255, 255,0,0.25])); 
app. symbols. circle = new SimpleFillSymbol(). setColor(new Color([0, 0, 180, 0.25])); 
// £ind the divs for buttons 
query(". drawing"). forEach(function(btn) { 
var button = new Button(( 
label: btn. innerHTML, 
onClick: function() { 
activateTool(this. id); 
) 
}, btn); 
Di 
function activateTool(type) ( 
app.tool = type.replace("freehand", ""); 
app. toolbar.activate(type); 
app. map. hideZoomSlider() ; 
} 
function addToMap(evt) { 
app. toolbar. deactivate() ; 
app. map. showZoomSl ider(); 


var graphic = new Graphic(evt.geometry, app. symbols[app. tool]); 
app. map. graphics. add(graphic); 
} 
Di 
</script> 
</head> 
< body class = "nihilo"> 
<div id= "mainWindow" 
data - dojo - type = "dijit/layout/BorderContainer" 
data - dojo- props = "design: ‘headline’, gutters: false" 
style= "width: 100 % ; height: 100 % ; margin: 0;"> 
« div id= "header" 
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data- dojo- type = "dijit/layout/ContentPane" 
data — dojo- props = "region: top'"» 
Print Dijit: Out of the Box Printing for the ArcGIS API for JavaScript 
<div id = "subheader"» Requires ArcGIS Server 10.1</div> 
</div> 
<div id= "map" class = "shadow" 
data — dojo — type = "dijit/layout/ContentPane" 
data — dojo - props = "region: 'center'"> 
<! -- drop shadow divs ——> 
<div id="ds"> 
<div id- "ds - h"> 
<div class = "ds hl o1"»«/div» 
< div class = "ds h2 o2"» «/div» 
< div class = "ds h3 03"></div> 
< div class = "ds h4 04"></div> 
< div class = "ds h5 o5"» «/div» 
</div> 
<div id= "ds—r"> 
<div class= "ds v1 ol"></div> 
<div class= "ds v2 o2"></div> 
<div class= "ds v3 03"></div> 
« div class = "ds v4 04"></div> 
< div class = "ds v5 05"></div> 
«/div» 
</div><! —— end drop shadow divs --> 
«/div» 
<div id= "rightPane" 
data — dojo- type = "dijit/layout/ContentPane 
data — dojo - props = "region: 'right'"> 


< div id= "printButton"></div> 
<hr /> 
< div id = "drawingWrapper"> 
Rdd some graphics: 
<div id= "point" class = "drawing"> Point </div> 
<div id = "freehandpolyline" class = "drawing" Freehand Polyline </div> 
<div id = "freehandpolygon" class = "drawing"> Freehand Polygon </div> 
<div id= "circle" class = "drawing"> Circle </div> 
</div> 
<hr /> 
<div id= "layerToggle"> 
Toggle Layers: « br /> 
<! -- checkbox and labels inserted programmatically -一 > 
</div> 
</div> 
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</div> 

</body> 

</html> 

最 终 运行 效果 如 图 5. 4-10 所 示 , 当 我 们 单 击 打印 按钮 时 浏览 器 会 跳 转 到 新 的 窗口 并 显 
示 打 印 的 效果 图 。 


OoOo aa 


司 Add some graphics: 
[ iy 
Point 


| Freehand Polyline | 

M —À 

| Freehand Polygon | 
Circle 

Toggle Layers: 


[v] County Population 
| 加 Ocean 


图 5.4-10 地 图 打印 功能 


OpenGIS 


6.1 OpenGIS 概述 


OpenGIS( Open Geodata Interoperation Specification ,开放 的 地 理 数 据 互 操作 规范 ) 由 
美国 OGC(Open Geospatial Consortium. OpenGIS 协会 ) 提 出 。OGC 是 一 个 非 赢利 性 组 织 , 目 
的 是 促进 采用 新 的 技术 和 商业 方式 来 提高 地 理 信 息 处 理 的 互 操作 性 (Interoperability), 它 致力 
于 消除 地 理 信 息 应 用 (如 地 理 信息 系统 .遥感 .土地 信息 系统 .自动 制图 /设施 管理 (AM/ 
FM) 系 统 ) 之 间 以 及 地 理应 用 与 其 他 信息 技术 应 用 之 间 的 藩篱 ,建立 一 个 “无 边界 ”的 、 分 布 
的 、 基 于 构件 的 地 理 数据 互 操作 环境 。 


6.1.1 什么 是 OpenGIS 


OpenGIS 是 指 在 计算 机 和 通信 环境 下 ,根据 行业 标准 和 接口 所 建立 起 来 的 地 理 信息 系 
统 。 它 不 仅 使 数据 能 在 应 用 系统 内 流动 .还 能 在 系统 间 流 动 。OpenGIS 是 为 了 使 不 同 的 地 
理 信息 系统 软件 之 间 具 有 良好 的 互 操作 性 ,以 及 在 异 构 分 布 数据 库 中 实现 信息 共享 的 途径 。 
OpenGIS 规范 是 由 开放 地 理 信息 系统 协会 (OGC) 制 定 的 一 系列 开放 标准 和 接口 。 

OGC 由 商业 部 门 、 政 府 机 构 、 用 户 以 及 数据 提供 商 等 多 个 领域 的 成 员 组 成 ,以 获取 地 理 
信息 处 理 市 场 最 大 的 互 操作 。OGC 的 目的 是 通过 信息 基础 设施 ,把 地 理 空间 数据 资源 集成 
到 主流 的 计算 技术 中 ,促进 可 互 操作 的 商业 地 理 信 息 处 理 软件 的 广泛 应 用 。OpenGIS 规范 
提供 了 地 理 信息 及 处 理 标准 ,按照 该 规范 开发 的 各 个 系统 之 间 可 以 自由 地 交换 地 理 信 息 和 
处 理 功 能 。 

OGC 会 员 主 要 包括 GIS 相关 的 计算 机 硬件 和 软件 制造 商 ( 包 括 ESRI, Intergraph, 
MapInfo 等 知名 的 GIS 软件 开发 商 ) ,数据 生产 商 以 及 一 些 高 等 院 校 .政府 部 门 等 ,其 技术 委 
员 会 负责 具体 标准 的 制定 工作 。 

OpenGIS 的 目标 是 制定 一 个 规范 ,使 得 应 用 系统 开发 者 可 以 在 单一 的 环境 和 单一 的 工 
作 流 中 ,使 用 分 布 于 网 上 的 任何 地 理 数据 和 地 理 处 理 。 它 致力 建立 一 个 “无 边界 ”的 、 分 布 
的 、 基 于 构件 的 地 理 数 据 互 操作 环境 ,与 传统 的 地 理 信息 处 理 技术 相 比 ,基于 该 规范 的 GIS 
软件 将 具有 很 好 的 可 扩展 性 、 可 升级 性 、 可 移植 性 、 开 放 性 、 互 操作 性 和 易 用 性 。 
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6.1.2 OpenGIS 特点 


OpenGIS 具有 下 列 特点 : 

CD 互 操作 性 : 不 同 的 地 理 信 息 系统 软件 之 间 连 接 、 信 息 交 换 没有 障碍 。 

(2) 可 扩展 性 : 硬件 可 在 不 同 软件 ,不同 档 次 的 计算 机 上 和 运行; 软件 增加 新 的 地 学 空间 
数据 和 地 学 数据 处 理 功 能 。 

(3) 公开 性 : 技术 开放 主要 是 对 用 户 公 开 , 公 开源 代码 及 规范 说 明 是 重要 途径 。 

(4) 可 移植 性 : 独立 于 软件 .硬件 及 网 络 环境 ,不 需 修改 便 可 在 不 同 的 计算 机 上 运行 。 

此 外 ,还 有 诸如 兼容 性 、 可 实现 性 、 协 同性 等 特点 。 

OGC 促进 了 GIS 的 互 操 作 。 它 通过 规范 改变 了 地 理 数据 及 其 服务 的 处 理 方式 ,通过 互 
操作 的 开放 式 系 统 将 它们 集成 ,从 而 在 Intranet/Internet 环境 下 ,通过 分 布 式 平台 从 异 构 信 
息 中 直接 获取 信息 。OGC 促进 了 地 理 数 据 提供 者 、 厂 商 和 服务 商 之 间 的 联合 。 推 动 了 全 球 
范围 内 的 标准 化 进程 ,拓宽 了 地 理 数据 服务 市 场 。OpenGIS 技术 将 使 GIS 始终 处 于 一 种 有 
组 织 `. 开 放 式 的 状态 ,真正 成 为 服务 于 整个 社会 的 产业 以 及 实现 地 理 信 息 的 全 球 范围 内 的 共 
享 与 互 操作 ,是 未 来 网 络 环境 下 GIS 技术 发 展 的 必然 趋势 。 


6.1.3 OpenGIS 相关 定义 


OpenGIS 定义 了 一 组 基于 数据 的 服务 ,而 数据 的 基础 是 要 素 (Feature) 。 所 谓 要 素 , 简 
单 地 说 就 是 一 个 独立 的 对 象 ,在 地 图 中 可 能 表现 为 一 个 多 边 形 建筑 物 ,在 数据 库 中 即 是 一 个 
独立 的 条 目 。 要 素 具 有 两 个 必要 的 组 成 部 分 几何 信息 和 属性 信息 。OpenGIS 将 几何 
信息 分 为 点 边缘、 面 和 几何 集合 四 种 : 其 中 这 里 熟悉 的 线 (LineString) 属 于 边缘 的 一 个 子 
类 ,而 多 边 形 (Polygon) 是 面 的 一 个 子 类 。 也 就 是 说 OpenGIS 定义 的 几何 类 型 并 不 仅仅 是 
我 们 常见 的 点 、 线 、 多 边 形 三 种 , 它 提供 了 更 复杂 更 详细 的 定义 ,增强 了 未 来 的 可 扩展 性 。 另 
外 ,几何 类 型 的 设计 中 采用 了 组 合 模式 (Composite) ,将 几何 集合 (GeometryCollection) 也 定 
义 为 一 种 几何 类 型 。 类 似 地 ,要 素 集 合 (FeatureCollection) 也 是 一 种 要 素 。 属 性 信息 没有 
做 太 多 的 限制 ,可 以 在 实际 应 用 中 结合 具体 的 实现 进行 设置 。 相 同 的 几何 类 型 .属性 类 型 的 
组 合成 为 要 素 类 型 (FeatureType) ,类 型 相同 的 要 素 可 以 存放 在 一 个 数据 源 中 。 而 一 个 数据 
源 只 能 拥有 一 个 要 素 类 型 。 因 此 ,可 以 用 要 素 类 型 来 描述 一 组 属性 相似 的 要 素 。 在 面向 对 
象 的 模型 中 ,完全 可 以 把 要 素 类 型 理解 为 一 个 类 ,而 要 素 则 是 类 的 实例 。 通 过 GIS 中 间 件 
可 以 从 数据 源 中 取出 数据 , 供 WMS 服务 器 和 WES 服务 器 使 用 。WMS 服务 器 接收 请 求 ， 
根据 请 求 内 容 的 不 同 , 可 以 返回 不 同 格式 的 最 终 数 据 。 例 如 ,WMS 可 以 返回 常用 图 片 格式 
的 地 图 片段 供 最 终 用 户 阅 读 ( 类 似 GoogleMaps) ,其 中 地 图 是 根据 一 个 样式 文件 (SLD) 生 成 
的 , 它 描述 了 地 图 的 线 的 宽度 、 色 彩 等 ; WMS 也 可 以 返回 GeoRSS 和 KML 用 来 与 其 他 地 
图 服务 互通 。WFS 服务 器 也 可 以 接收 请 求 .但 WES 将 返回 GML 格式 的 地 理 信息 数据 。 
GML 是 一 种 基于 XML 的 数据 格式 , 它 可 以 完整 地 再 现 数据 ,也 是 OpenGIS 数据 源 的 重要 
形式 。 也 就 是 说 ,WFS 返回 的 GML 可 以 继续 作为 数据 源 。 在 WES 请 求 中 ,OpenGIS 定义 
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T —^ Filter 标准 ,用 来 实现 对 数据 的 筛选 ,使 WFS 更 加 灵活 。 另 一 方面 , WFS 还 支持 通 
过 WFS-t 提交 客户 端 对 数据 的 修改 。 通 俗 地 说 , WMS 是 只 读 的 ,而 WFS 则 是 可 以 读 


写 的 。 


6.1.4 OpenGIS 开放 模式 


开放 GIS 就 是 网 络 环境 中 对 不 同 种 类 地 理 数据 和 地 理 处 理 方法 的 透明 访问 。 开 放 GIS 
的 目的 是 提供 一 套 具 有 开放 界面 规范 的 通用 组 件 ,开发 者 根据 这 些 规范 开发 出 交互 式 组 件 ， 
这 些 组 件 可 以 实现 不 同 种 类 地 理 数据 和 地 理 处 理 方法 间 的 透明 访问 。 

从 小 型 产业 到 全 球 空间 数据 基础 机 构 开 放 GIS 协会 的 OGIS 工程 技术 委员 会 已 经 完成 
了 一 系列 文献 的 第 一 部 分 ,包括 OGIS。 第 一 部 叫 (开放 GIS 交互 性 指南 》, 它 全 面 而 深入 地 
阐述 了 OGIS; 第 二 部 OGIS 文献 包括 高 级 技术 语言 ,这 种 语言 是 一 种 完全 意义 上 的 执行 语 
言 ,不 需要 解 译 , 它 的 说 明 书 由 GIS 世界 有 限 公司 出 版 。 但 OGIS 并 非 OGC 的 最 终 对 象 ， 
《开放 GIS 交互 性 指南 ) 的 出 版 不 是 OGC 的 第 一 个 重要 里 程 碑 。OGC 的 真正 功能 是 在 地 
理 信 息 领 域 制定 一 个 规范 来 统一 行业 ,并 把 这 种 规范 融入 到 更 宽 的 技术 领域 和 更 大 的 市 场 
中 ,使 它 成 为 全 球 信息 基础 机 构 不 可 分 离 的 一 部 分 ,全 球 信息 基础 机 构 主要 是 组 织 世 界 性 活 
动 和 解决 重要 环境 和 基础 设施 问题 的 机 构 。 类 似 的 工作 在 其 他 行业 已 经 取得 了 成 功 。 

国际 竞争 不 是 OGC 所 要 解决 的 问题 ,OGC 所 要 解决 的 是 把 本 行业 从 信息 技术 这 个 大 
行业 中 分 离 出 来 。 长 时 间 以 来 ,GIS 只 不 过 是 一 个 “家 庭 手工 业 ”, 它 的 很 多 方面 与 机 械 行业 
在 工业 革命 前 的 受 限 情况 相似 ,不 过 这 种 情况 已 经 得 到 了 改变 。 

GIS 软件 开发 正 朝 着 组 件 式 GIS 方向 发 展 ,因为 在 以 往 , 组 件 式 这 一 基本 原则 已 经 加 强 
了 技术 上 的 优势 : 例如 ,通过 把 一 个 复杂 繁琐 的 大 问题 划分 为 一 些 更 易 解决 的 小 问题 ,从 而 
成 功 地 进行 了 工程 分 析 。 充 分 利用 现 有 的 零件 和 材料 就 可 以 进行 组 装 制造 。 一 套 可 行 性 标 
准 的 出 台 、 商 品 和 物质 的 丰富 更 使 组 件 式 成 为 了 现实 。 

过 去 ,工程 原则 趋向 于 从 技术 和 工艺 向 既定 的 程序 和 方法 发 展 。 虽 然 革 新 者 和 发 明 家 
用 直觉 和 强制 力量 得 出 了 新 产品 和 成 果 , 但 这 种 进步 是 偶然 的 ,材料 的 运用 效率 很 低 ,商品 
化 的 进程 很 慢 。 一 般 情 况 下 ,初始 阶段 后 紧 接着 的 是 学 习 技 能 阶段 ,在 这 个 阶段 中 每 个 人 都 
模仿 革新 者 而 成 为 熟练 的 从 业者 。 但 像 工匠 一 样 ,他们 的 行业 受到 缺乏 标准 .专门 化 和 基础 
设施 的 限制 。 科 学 和 工程 学 把 规范 和 理论 框架 提 到 了 日 程 上 ,发 展 变 得 更 有 预见 性 ,人 们 倾 
向 于 他 们 的 专业 领域 .数量 质量 和 应 用 激增 ,是 标准 和 其 他 基础 设施 支持 了 这 种 发 展 ,整个 
市 场 价 值 和 规模 扩大 。 

《开放 GIS 交互 性 指南 ) 中 的 一 个 新 概念 “信息 通信 ”对 GIS 的 普及 起 着 重要 的 作用 。 
OGIS 的 第 一 版 将 规范 空间 属性 和 几乎 所 有 信息 行业 所 需要 的 支持 。 然 后 ,OGIS 提供 一 个 
标准 方法 ,通过 这 种 标准 信息 行业 (整个 工业 的 “技术 授权 者 ”) 可 以 为 在 他 们 学 科 或 行业 中 
使 用 的 空间 数据 编纂 符号 ,开发 方法 和 使 用 权限 .也 就 是 说 ,因为 学 术 评 论 委 员 会 和 专业 组 
织 协会 提供 了 符号 定义 , “基础 OGIS” 将 会 被 扩充 ,学 术 评 论 委 员 会 和 专业 组 织 协会 的 职责 
就 是 为 他 们 的 用 户 建立 符号 和 编译 规则 ,这 些 符号 和 编译 规则 将 确定 “基础 OGIS” 和 其 他 
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学 科 空 间 符号 的 信息 行业 界面 。 
6.1.5 软件 及 类 库 


1. 桌面 GIS 软件 

桌面 GIS 软件 用 于 桌面 电脑 环境 的 GIS 信息 浏览 编辑 和 分 析 工 具 。 

代表 : User-friendlyDesktopInternetGIS ( uDig) , QuantumGIS ( QGIS), GRASSGIS, 
gvSIG 5i ii & 4t , KosmoDesktop, OpenJUMPGIS, 

2. 客户 端 

客户 端 分 为 浏览 器 和 桌面 客户 端 程序 两 种 。 

代表 : OpenLayers/MapBuilder(JavaScript) 网 页 GIS fk $ , MapBender 网 络 地 图 服务 
集成 框架 `.QGISCC++) 网 页 地 图 服务 。 

3. 地 图 与 导航 

代表 : GPSDrive—GPS 5$ fii, GPSPrune—GPS 航 迹 编辑 器 .OpenCPN 一 海 图 导航 、 
OpenStreetMap 工具 组 一 OpenStreetMap 相关 工具 。 

4. 地 理 空间 操作 函数 库 

地 理 空间 操作 函数 库 在 系统 中 扮演 连接 数据 和 服务 的 角色 。 

代表 : GeoTools(JavaGIS 工具 箱 )、GEOS-C/C++ 空 间 操作 、JTSTopologySuite (JTS) 
拓扑 运算 函数 库 、Java 语言 的 拓扑 运算 。 

5. 数据 源 实现 

数据 源 的 实现 主要 是 开源 数据 库 的 空间 扩展 。 

代表 : PostGIS(PostgreSQL) ,MySQLSpatial. 

6. WMS/WFS 服务 器 

地 图 服务 器 扮演 向 网 络 中 的 客户 端 提供 地 图 服务 的 角色 。 这 类 地 图 服务 器 可 以 接收 统 
一 规范 的 WMS 和 WES 请 求 (request) ,返回 多 种 格式 的 数据 。 这 个 过 程 有 WMS/WFS 规 
范 的 严格 规定 ,所 以 对 客户 端 来 说 ,其 地 图 服务 器 的 实现 究竟 是 什么 并 不 会 造成 太 大 影响 。 
这 样 的 规范 为 公共 的 、 联 合 的 地 图 服务 创造 了 可 能 。 

代表 : GeoServer(Java) , MapServer( PHP) 。 

7. Shapefile 

ESRI 的 Shapefile 格式 是 GIS 矢量 文件 格式 的 事实 标准 ,通常 由 . shp、. shx,. prj.. dbf 
等 文件 组 成 。OpenGIS 的 实现 软件 普遍 支持 Shapefile 的 读 写 。Shapefile 在 GeoServer 中 
可 以 直接 作为 数据 源 , 但 是 这 种 方式 并 不 被 推荐 ,原因 很 简单 ,基于 文件 的 数据 源 可 能 造成 
性 能 不 佳 和 数据 丢失 。 

8. GML 

GML 是 OpenGIS 的 标准 规范 之 一 . 它 基于 xml 描述 地 理 数据 。 与 Shapefile fH EE . xml 
更 容易 读 写 ,易于 在 网 络 中 以 各 种 形式 传播 。 同 时 ,xml 还 具有 可 读 性 ,可 供 人 们 理解 和 辩 
识 。GeoTools 实现 了 GMLDataStore, 因 此 在 GeoServer 中 GML 也 可 以 直接 作为 数据 源 
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(需要 下 载 GML 扩展 )。 同 时 ,GML 的 数据 源 为 数据 源 动 态 化 提供 了 实现 的 思路 和 可 
能 性 。 

9. PostGIS 

PostGIS 是 加 拿 大 Refractions 公司 支持 的 开源 项 目 , 它 为 开源 数据 库 PostgreSQL Hè 
供 了 空间 支持 。PostGIS 安装 后 , PostgreSQL 中 出 现 一 个 模板 数据 库 ,新 建 空间 数据 库 时 
只 需 以 PostGIS 为 模板 即 可 。PostGIS 在 SQL 级 别 上 实现 了 基本 的 空间 运算 功能 。 另 外 
绝 大 多 数 开源 GIS 软件 (即使 是 不 严格 遵守 OpenGIS 标准 的 ) 都 支持 PostGIS 数据 表 的 直 
RRA BEED. HHR EKE, PostGIS 是 OpenGIS 数据 源 最 佳 实现 。 

10. MySQLSpatial 

MySQL J&JF ili BA He f 5. MA MySQLA. 0 开始 加 入 了 Spatial 扩展 功能 ,实现 了 
OpenGIS 规定 的 几何 数据 类 型 ,在 SQL 中 的 简单 空间 运算 。 但 是 从 4. 0 之 后 到 现在 ， 
MySQL 的 Spatial 部 分 一 直 没 有 继续 更 新 和 增强 。 加 上 早先 MySQL 在 SQL 上 对 空间 运 
算 支持 的 不 完善 (只 支持 基于 最 小 外 接 矩 形 的 关系 判断 ), 所 以 MySQL 是 开源 数据 源 中 一 
个 不 太 让 人 满意 的 选择 。 不 过 ,由 于 MySQL 在 小 型 项 目 上 的 广泛 引用 ,在 一 些 情况 下 也 是 
可 以 以 MySQL 为 数据 源 的 。 


6.1.6 框架 作用 


开放 GIS 是 做 什么 的 呢 ? 开发 者 用 开放 GIS 规范 的 界面 建立 系统 的 过 程 中 要 开发 一 
些 过 渡 软 件 、 组 件 软件 和 能 处 理 所 有 类 型 地 理 数据 和 具有 地 理 数 据 处 理 功能 的 应 用 软件 。 
这 些 系统 的 用 户 可 以 共享 一 个 巨型 的 网 络 数据 空间 ,数据 可 以 在 不 同 的 时 间 ,由 无 关 的 组 织 
用 不 同 的 方法 为 不 同 的 目的 采集 ,也 可 以 处 于 早期 的 控制 系统 之 下 。 

具有 开放 GIS 规范 统一 界面 系统 中 的 地 理 数据 可 以 被 其 他 所 有 具有 开放 GIS 规范 统 
一 界面 的 软件 访问 。 这 些 界 面 要 使 标准 桌面 PC 或 运行 低档 开放 GIS 绘图 应 用 软件 的 笔记 
本 电脑 的 用 户 能 够 通过 制图 软件 中 简单 图 形 选取 功能 在 网 上 查询 远程 数据 服务 器 ,远程 数 
据 服务 器 存储 一 些 商 用 的 地 理 数据 ,这 些 数 据 存储 在 配置 有 开放 GIS 界面 的 通用 关系 数据 
库 管理 系统 (RDBMS) 中。 其 中 一 部 分 数据 也 许 是 几 年 前 在 Genasys, IntergraphMGE 或 
ESRIARC/INFO 系统 中 采集 的 ,也 可 能 是 一 套 共 用 的 关系 型 数据 库 记 录 集 ,用 户 利用 绘图 
应 用 软件 进行 查询 时 ,记录 集 的 街道 地 局 限 在 满足 用 户 查询 条 件 的 区 域 ,由 于 客户 绘图 软件 
存在 着 不 足 ,信息 在 传送 过 程 中 可 能 会 丢失 一 部 分 ,但 服务 器 和 绘图 应 用 程序 可 以 把 信息 的 
丢失 情况 通知 用 户 。 

用 户 还 能 从 远程 服务 器 请 求 获 得 地 理 数据 处 理 服务 ,一些 价格 较 低 的 绘图 应 用 软件 就 
可 以 下 载 GIS 功能 的 工具 条 ,这 些 工 具 条 可 以 控制 高 级 的 、 功 能 强大 的 远程 GIS 服务 器 。 
在 许多 分 布 式 地 理 数据 处 理应 用 软件 方案 中 ,为 了 得 到 一 个 答案 ,这 些 应 用 软件 可 以 到 多 个 
服务 器 上 进行 查询 。 基 于 网 络 的 过 渡 软 件 对 这 一 功能 的 实现 起 着 重要 的 作用 。 开 放 GIS 
规范 为 软件 开发 者 提供 了 框架 ,根据 这 些 框 架 开 发 的 软件 可 以 使 它们 的 用 户 在 一 个 开放 信 
息 技术 的 基础 上 通过 一 般 的 计算 界面 就 可 以 访问 和 处 理 不 同 来 源 的 地 理 数据 。 
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“软件 开发 者 的 框架 "意味 着 开放 GIS 规范 是 一 个 全 面 的 .通用 的 具有 交互 性 的 地 理 数 
据 处 理 方案 的 详细 软件 规范 .“ 访 问 和 处 理 ? 在 本 文中 意味 着 地 理 数据 的 用 户 可 以 远程 查询 
数据 库 并 控制 处 理 源 , 可 以 利用 其 他 分 布 式 计算 技术 ,例如 软件 从 一 个 远程 环境 传送 到 用 户 
当前 环境 临时 使 用 。 也 就 是 说 ,基于 组 件 式 软件 或 复合 文档 环境 的 应 用 程序 可 以 进行 地 理 
数据 处 理 。“ 不 同 来 源 ” 意 味 着 用 户 可 以 以 不 同方 法 访问 数据 ,可 以 把 数据 存储 在 不 同 的 数 
据 库 中 。“ 通 过 一 般 的 计算 界面 "意味 着 开放 GIS 界面 为 所 有 使 用 这 种 开放 界面 的 软件 间 
提供 了 可 靠 的 通信 ,也 就 是 说 ,所 有 具有 开放 GIS 界面 的 软件 间 可 以 进行 互 操 作 来 发 送 和 
接收 数据 .“ 在 开放 信息 技术 环境 中 ?意味 着 开放 GIS 规范 使 地 理 数据 处 理 方法 应 用 在 所 
有 网 络 版 GIS 环境 .遥感 ,控制 和 限制 数据 库 的 AM/FM 系统 、 用 户 界 面 、 网 络 和 数据 处 理 
中 。 权 威 的 计算 范例 从 封闭 系统 转向 开放 系统 ,从 孤立 转向 实时 互 操作 系统 ,从 固定 包装 的 
独立 应 用 软件 转向 配 有 为 用 户 提供 更 灵活 功能 组 件 软件 的 应 用 软件 环境 。 

通过 这 一 小 节 , 我 们 对 OpenGIS 的 概念 有 了 大 致 的 了 解 , 接 下 来 介绍 OpenGIS 的 技术 
实现 的 相关 知识 。 


6.2 OpenGIS 技术 实现 


6.2.1 面向 对 象 技术 与 分 布 计算 技术 


在 OGIS 中 ,从 开放 式 地 理 数 据 模 型 到 开放 式 地 理 服务 模型 ,面向 对 象 技术 都 无 所 不 
在 。 例 如 ,把 数据 类 型 及 其 操作 都 封装 在 一 起 ,将 共同 的 接口 提供 给 用 户 ,用 户 不 需 知道 其 
具体 实现 过 程 。 数 据 是 隐藏 在 对 数据 进行 操作 的 接口 之 中 的 ,对 具体 功能 实现 的 改变 不 会 
影响 其 接口 ; 为 了 定义 更 具体 的 对 象 , 可 以 在 基本 对 象 特性 的 继承 上 ,再 增加 一 些 更 具体 的 
方法 。 

分 布 计算 是 指 分 布 处 理 系统 中 的 计算 和 数据 处 理工 作 , 分 布 计算 环境 提供 分 布 处 理 的 
服务 和 工具 。 建 立 分 布 计算 环境 ,必须 遵循 开放 系统 原则 。 开 放 式 地 理 信 息 系统 是 在 分 布 
处 理 环境 之 上 考虑 的 ,尽管 它 的 目标 是 实现 独立 于 分 布 处 理 平台 的 标准 和 接口 ,但 实现 开放 
式 地理 信 息 系统 必须 以 分 布 处 理 环 境 为 依托 。 


6.2.2 开放 式 数 据 库 互 连 CODBC) 


由 于 数据 源 的 多 样 性 ,需要 一 种 规范 来 完成 数据 的 连接 ,而 ODBC 就 能 很 好 地 完成 该 
项 任务 。ODBC 是 一 个 用 于 访问 数据 库 的 统一 界面 标准 。 它 实际 上 是 一 个 数据 库 访问 库 ， 
它 的 最 突出 特点 是 应 用 程序 不 随 数据 库 的 改变 而 改变 。ODBC 的 工作 原理 是 通过 使 用 驱 
动 程序 (Driver) 来 体现 数据 库 独立 性 。Driver 是 一 个 用 以 支持 ODBC 函数 调用 的 模块 ,应 
用 程序 通过 调用 驱动 程序 支持 的 函数 来 操作 数据 库 , 不 同类 型 的 数据 库 对 应 不 同 的 驱动 
程序 。 

OGIS 和 ODBC 的 思想 类 似 。OGIS 是 为 了 访问 不 同 地 理 信息 系统 软件 而 研制 的 统一 
标准 接口 ,使 不 同 地 理 信息 系统 软件 之 间 能 相互 操作 ,但 它 和 API( 应 用 程序 接口 ) 又 有 所 不 
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I]. API 与 操作 系统 和 程序 设计 语言 有 关 , 而 OGIS 中 的 接口 更 抽象 ,更 独立 。 

1. ODBC 介绍 

ODBC(Open Database Connectivity, 开放 数据 库 互 连 ) 是 微软 公司 开放 服务 结构 
(Windows Open Services Architecture. WOSA) 中 有 关 数 据 库 的 一 个 组 成 部 分 , 它 建立 了 一 
组 规范 ,并 提供 了 一 组 对 数据 库 访 问 的 标准 API( 应 用 程序 编程 接口 )。 这 些 API 利用 SQL 
来 完成 其 大 部 分 任务 。ODBC 本 身 也 提供 了 对 SQL 语言 的 支持 ,用 户 可 以 直接 将 SQL il 
句 送 给 ODBC。 可 以 使 用 ODBC 驱动 程序 访问 一 组 数据 的 位 置 。 

2. ODBC 的 优点 

一 个 基于 ODBC 的 应 用 程序 对 数据 库 的 操作 不 依赖 任何 DBMS ,不 直接 与 DBMS 打 交 
道 ,所 有 的 数据 库 操作 由 对 应 的 DBMS 的 ODBC 驱动 程序 完成 。 也 就 是 说 ,不 论 是 
FoxPro, Access, 还 是 Oracle 数据 库 , 均 可 用 ODBC API 进行 访问 。 由 此 可 见 ,ODBC 的 最 
大 优点 是 能 以 统一 的 方式 处 理 所 有 的 数据 库 。 

ODBC 技术 以 C\S 结构 为 设计 基础 , 它 使 得 应 用 程序 与 DBMS 之 间 在 逻辑 上 可 以 分 
离 ,使 得 应 用 程序 具有 数据 库 无 关 性 。ODBC 定义 了 一 个 API, 每 个 应 用 程序 利用 相同 的 源 
代码 就 可 以 访问 不 同 的 数据 库 系 统 , 存 取 多 个 数据 库 中 的 数据 。 与 嵌入 式 SQL 相 比 ， 
ODBC 最 显著 的 优点 是 利用 它 生 成 的 应 用 程序 与 数据 库 或 数据 库 引 擎 无 关 。 

ODBC 使 应 用 程序 具有 良好 的 互 用 性 和 可 移植 性 ,并 且 具 备 同时 访问 多 种 DBS 的 能 
力 , 从 而 克服 了 传统 数据 库 应 用 程序 的 缺陷 。 

3. 通过 ODBC 完成 数据 转换 

前 面 介绍 说 ,OpenGIS 就 是 制定 一 个 规范 ,使 得 应 用 系统 开发 者 可 以 在 单一 的 环境 和 
单一 的 工作 流 中 ,使 用 分 布 于 网 上 的 任何 地 理 数据 和 地 理 处 理 ,在 这 个 过 程 中 ,需要 用 到 
ODBC。 因 为 OpenGIS 最 初 的 设想 是 制定 一 套 标准 (标准 API 函数 ) 提 供 读 / 写 自 己 系统 空 
间 数 据 的 驱动 程序 ,其 他 软件 就 可 以 通过 调用 这 一 程序 ,直接 读 到 对 方 的 内 部 数据 ,而 该 驱 
动 程序 就 可 以 使 用 ODBC., 

ODBC 作为 一 种 驱动 程序 ,可 以 访问 OpenGIS 中 的 地 理 要 素数 据 的 位 置 , 它 建立 了 一 
组 规范 ,并 提供 了 一 组 对 数据 库 访问 的 标准 API( 应 用 程序 编程 接口 )。 这 些 API 利用 SQL 
来 完成 其 大 部 分 任务 。ODBC 本 身 也 提供 了 对 SQL 语言 的 支持 ,用 户 可 以 直接 将 SQL 语 
句 送 给 ODBC. mi SQL 作为 结构 化 查询 语言 ,可 以 便捷 地 存 取 数据 以 及 查询 更 新 和 管理 。 
因此 ,ODBC 是 适合 OpenGIS 的 。 


6.2.3 分 布 式 对 象 技 术 


分 布 式 对 象 技术 (Distributed Object Technology) 是 建立 在 网 络 基础 上 的 。 它 是 建立 
在 组 件 (Component) 的 概念 之 上 。 组 件 可 以 跨 平 台 、 网 络 和 应 用 程序 运行 。 

目前 ,有 两 个 标准 用 来 规范 组 件 的 连接 和 通信 问题 。 一 个 是 对 象 集团 (OMG ) 提出 的 
CORBA( Common Object Request Broker Architecture). 另 一 个 是 微软 公司 的 DCOM 
(Distributed Component Object Model) 。OGIS 只 是 对 开放 地 理 信 息 系 统 定义 了 抽象 的 互 
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操作 规程 ,具体 如 何 实现 ,还 需 采 用 分 布 式 对 象 的 技术 ,通过 Acrobat, OLE, ActiveX, Java 
等 语言 实现 。 

从 数据 的 观点 看 ,开放 式 地 理 信 息 系统 是 未 来 网 络 环境 下 地 理 信 息 系 统 技术 发 展 的 必 
然 趋势 。 地 理 信息 标准 化 组 织 对 开放 式 地 理 信息 系统 的 研究 和 开发 具有 浓厚 的 兴趣 ,逻辑 
级 的 数据 组 织 、 处 理 和 交换 机 制 的 说 明文 本 已 开始 供 业 界 讨论 ,而 对 系统 的 具体 实现 将 是 地 
理 信息 系统 发 展 的 重要 任务 。 

通过 前 面 的 介绍 ,我 们 对 OpenGIS 框架 有 了 大 致 的 了 解 , 接 下 来 介绍 如 何 搭建 一 个 开 
源 的 OpenGIS 平台 并 且 介 绍 相关 实例 。 

基于 OpenGIS 的 地 图 服务 可 以 供 网 上 任何 能 够 发 现 它 们 的 应 用 程序 调用 ,甚至 可 以 被 
其 他 Web 服务 调用 。 利 用 Web 服务 技术 ,可 以 很 好 地 实现 服务 在 Internet 层次 上 的 互 操 
TE. OpenGIS 作为 访问 地 理 信 息 和 地 理 数 据 处 理 服 务 开放 的 标准 接口 ,是 解决 数据 共享 与 
互 操作 问题 的 关键 。 本 章 基 于 OpenGIS ,利用 开源 地 图 服务 器 以 及 WebGIS 客户 端 开发 包 
Openlayers 构建 了 开放 的 可 定制 的 地 图 服务 平台 。 

1. 软件 框架 选择 

开发 语言 : Java。 

地 图 服务 器 : GeoServer。 

地 图 框架 : OpenLayers。 

数据 库 实 现 : PostGIS(PostgreSQL) 。 

2. 地 图 服务 平台 的 系统 体系 结构 

随 着 Internet 的 发 展 ,B/S 结构 的 WebGIS 已 经 由 浏览 器 /网 络 服务 器 /数据 服务 器 
(Browser/WebServer/DataServer) 三 层 架构 阶段 进入 到 浏览 器 /网 络 服务 器 /应 用 服务 器 / 
数据 服务 器 (Browser/ WebServer/ApplicationServer/DataServer) 四 层 架 构 阶 段 。 

在 四 层 B/S 架构 中 ,网 络 服务 器 和 应 用 服务 器 分 离 ,其间 还 可 以 插入 二 次 开发 和 扩展 
功能 ,其 中 的 应 用 服务 器 一 般 为 支持 远程 调用 的 组 件 式 GIS 平台 ,或 由 组 件 式 GIS OE AE 
装 而 成 。 将 GIS 复杂 数据 分 析 与 处 理 功能 (编辑 .拓扑 关系 的 构建 .对 象 关 系 的 自动 维护 、 
制图 ) 移 植 到 GIS 应 用 服务 器 上 ,使 客户 端 与 服务 端的 数据 传输 减 到 最 少 的 程度 ,为 在 
Internet 上 实现 复杂 、 大 规模 的 地 理 信息 服务 提供 了 可 能 。 这 一 架构 带 来 的 巨大 优势 是 使 
服务 器 端 具 有 极 强 的 扩展 性 ,能 够 方便 地 和 其 他 的 系统 进行 集成 ,而 且 维 护 、 更 新 和 扩展 这 
些 应 用 也 非常 容易 。 因 此 作为 应 用 服务 器 的 组 件 式 GIS 所 具备 的 功能 ,都 可 以 通过 B/S 结 

图 6. 2-1 是 地 图 服务 平台 结构 框架 ,其 中 ,应 用 层 主要 封装 了 与 地 图 相关 的 服务 ,包括 
地 图 表现 服务 .地 图 查询 服务 .数据 转换 服务 等 ,而 用 户 层 通过 与 Web 服务 器 以 及 应 用 服务 
器 的 交互 ,获得 上 述 服务 地 址 ,并 进行 调用 。 

地 图 服务 平台 是 建立 在 空间 数据 标准 化 、 服 务 标准 化 的 基础 上 的 ,平台 建设 是 一 项 系统 
工程 ,必须 遵循 一 定 的 原则 ,否则 就 无 法 实现 平台 的 开放 性 。 平 台 实现 必须 遵循 的 指导 性 原 
则 如 下 : 
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客户 端 浏览 器 
(IE,FF chrome) MP hea 
网 络 服务 器 HS Web 服 务 器 层 
N 
地 图 表 | | 地 图 查 数据 转 其 他 
现 服务 | | 询 服务 换 服 务 服务 应 用 层 
LLLA 
空间 数据 数据 层 


图 6.2-1 地 图 服务 平台 四 层 结构 示意 图 


(1) 模块 化 : 指 平台 中 的 任何 一 个 空间 信息 服务 只 是 整个 体系 中 的 一 个 模块 ,可 以 独 
立 存 在 和 发 布 ,也 能 够 集成 到 别 的 模块 中 成 为 别 的 服务 的 一 个 部 分 ,从 而 支持 不 同 服务 模块 
的 多 种 组 合 。 

(2) 标准 化 : 平台 中 的 各 个 服务 的 实现 与 集成 应 遵循 关于 空间 信息 描述 ,组 织 等 方面 
的 标准 需要 ,如 GML、 遵 循 内 容 编码 ,数据 通信 等 方面 的 标准 ,才能 保证 所 建立 的 空间 信息 
服务 的 可 使 用 性 、 互 操作 性 。 

(3) 开放 集成 : 任何 服务 集成 或 链接 的 方式 都 通过 标准 的 、 开 放 的 调用 和 表现 机 制 来 
实现 ,与 具体 位 置 和 系统 平台 无 关 , 尽 管 其 中 某 些 ( 甚 至 所 有 ) 服 务 就 部 署 在 本 地 系统 上 。 


6.3 地 图 服务 器 GeoServer 


1. GeoServer 定义 

GeoServer 是 OpenGISWeb 服务 器 规范 的 J2EE 实现 ,利用 GeoServer 可 以 方便 地 发 布 
地 图 数据 ,允许 用 户 对 特征 数据 进行 更 新 .删除 .插入 操作 ,通过 GeoServer 可 以 比较 容易 地 
在 用 户 之 间 迅 速 共享 空间 地 理 信息 。 

2. GeoServer 主要 特性 

兼容 WMS 和 WES 特性 ; 支持 PostgreSQL, Shapefile, ArcSDE, Oracle, VPF, 
MySQL,MaplInfo; 支持 上 百 种 投影 ; 能 够 将 网 络 地 图 输出 为 JPEG GIF .PNG、SVG KML 
等 格式 ; 能 够 运行 在 任何 基于 J2EE/Servlet 的 容器 之 上 ; RA MapBuilder 支持 AJAX 的 
地 图 客户 端 OpenLayers; 除 此 之 外 ,还 包括 许多 其 他 的 特性 。 
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3. GeoServer 最 新 的 版 本 

1. 5. Obetal 版 增加 了 GeoTools2. 2. x. GeoTools 是 一 款 基于 Java 的 开源 GIS 工具 
集 , 人 允许 用 户 对 地 理 数据 进行 基本 操作 。 通 过 GeoTools 的 各 种 接口 和 helper 类 ,可 以 写 入 
新 的 数据 格式 ,通过 GeoTools 为 GeoServer 提供 的 插件 ,在 不 进行 重新 编译 的 情况 下 ,可 以 
让 GeoServer 支持 更 多 的 数据 格式 ,甚至 只 需要 通过 GUI 的 option 设置 。 

目前 ,GeoServer 最 新 版 本 为 2.5.0。 

用 户 可 以 从 官网 http://docs. geoserver. org/ 下 载 安装 文件 。 安 装 文件 有 两 种 ,一 种 是 
常见 的 . EXE 安装 文件 ,例如 geoserver-2. 0. 1-ng. exe。 这 种 安装 方式 最 简单 ,只 要 确保 计 
算 机 上 安装 了 JDK, 并 且 8080 端口 是 开 的 ,按照 安装 步骤 一 步 一 步 进 行 就 可 以 完成 安 
装 。 另 一 种 是 以 WAR 的 形式 安装 ,需要 开发 者 计算 机 上 安装 有 Tomcat, 然 后 将 此 WAR 
导入 即 可 。 


6.3.1  GeoServer 简介 


GeoServer 是 一 个 功能 齐全 ,遵循 OGC 开放 标准 的 开源 WFS-T 和 WMS 服务 器 。 利 
用 GeoServer 可 以 把 数据 作为 maps/images 发 布 ( 利 用 WMS 来 实现 ), 也 可 以 直接 发 布 实 
际 的 数据 (利用 WES 来 实现 ) ,同时 也 提供 了 修改 、 删 除 和 新 增 的 功能 (利用 WFS-T)。 

GeoServer, 是 一 个 开源 的 Server, 允 许 用 户 查 看 和 编辑 地 理 数据 。 这 是 地 理 信 息 系统 
(GIS) 领 域 。GeoServer 是 符合 OGC 规范 的 一 个 全 功能 的 WFS-T 和 WMS server。 

GeoServer 能 够 发 布 的 数据 类 型 : 

(1) 地 图 或 影 象 一 一 应 用 WMS, 

(2) 实时 数据 一 一 应 用 WFS。 

(3) 用 户 更 新 ,删除 和 编辑 的 数据 一 一 应 用 WFS-T。 

1. WMS(Web Map Service. Web 地 图 服务 ) 

利用 具有 地 理 空间 位 置信 息 的 数据 制作 地 图 ,将 地 图 定义 为 地 理 数据 可 视 化 的 表现 。 
这 个 规范 定义 了 三 个 操作 : 

(1) GetCapabitities: 返回 服务 级 元 数据 , 它 是 对 服务 信息 内 容 和 要 求 参 数 的 一 种 

(2) GetMap: 返回 一 个 地 图 影像 ,其 地 理 空间 参考 和 大 小 参数 是 明确 定义 了 的 。 

(3) GetFeatureInfo( 可 选 ): 返回 显示 在 地 图 上 的 某 些 特 殊 要 素 的 信息 。 

2. WFS(Web Feature Service. Web 要 素 服务 ) 

Web 地 图 服务 返回 的 是 图 层级 的 地 图 影像 , Web 要素 服务 (WFS) 返 回 的 是 要 素 级 的 
GML 编码 ,并 提供 对 要 素 的 增加 修改 、 删 除 等 事务 操作 ,是 对 Web 地 图 服务 的 进一步 深 
入 。OGCWeb 要 素 服 务 允许 客户 端 从 多 个 Web 要 素 服务 中 取得 使 用 地 理 标 记 语 言 (GML) 
编码 的 地 理 空间 数据 ,定义 了 五 个 操作 : 

(1) GetCapabilites: 返回 Web 要 素 服务 性 能 描述 文档 (用 XML 描述 )。 

(2) DescribeFeatureType: 返回 描述 可 以 提供 服务 的 任何 要 素 结构 的 XML 文档 。 
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(3) GetFeature: 一 个 获取 要 素 实 例 的 请 求 提供 服务 。 

(4) Transaction; 为 事务 请 求 提供 服务 。 

(5) LockFeature: 处 理 在 一 个 事务 期 间 对 一 个 或 多 个 要 素 类 型 实例 上 锁 的 请 求 。 

3. WFS-T(Web Map Service-Transactional. 网络 地 图 传输 服务 ) 

允许 用 户 以 可 传输 的 块 编辑 地 理 数 据 。 

4. WCS(Web Coverage Service. Web 覆盖 服务 ) 

Web 覆盖 服务 (WCS) 面 向 空间 影像 数据 , 它 将 包含 地 理 位 置 值 的 地 理 空间 数据 作为 
“fl tt (Coverage) "在 网 上 相互 交换 。 

网 络 覆 盖 服 务 由 三 种 操作 组 成 : GetCapabilities, GetCoverage 和 DescribeCoverageType 。 

(1) GetCapabilities: 返回 描述 服务 和 数据 集 的 XML 文档 。 

(2) GetCoverage: 它 是 在 GetCapabilities 确定 什么 样 的 查询 可 以 执行 、 什 么 样 的 数据 
能 够 获取 之 后 执行 的 , 它 使 用 通用 的 覆盖 格式 返回 地 理 位 置 的 值 或 属性 。 

(3) DescribeCoverageType: 允许 客户 端 请 求 由 具体 的 WCS 服务 器 提供 的 任 一 覆盖 层 
的 完全 描述 。 

5. GML(Geography Markup Language, 地 理 标记 语言 ) 

GML 是 一 种 用 于 描述 地 理 数据 的 XML. 

地 理 标记 语言 (Geography Markup Language. GML), 它 由 开放 式 地 理 信息 系统 协会 
(OGC) 于 1999 年 提出 ,并 得 到 了 许多 公司 的 大 力 支持 ,如 Oracle, Galdos, MapInfo, 
CubeWerx 等 。GML 能 够 表示 地 理 空间 对 象 的 空间 数据 和 非 空间 属性 数据 。 

6. OGC(Open Geospatial Consortium, 开 放 地 理 信 息 联盟 ) 

总 之 ,GeoServer 是 您 需要 显示 地 图 在 网 页 的 那些 工具 当中 的 一 个 ,用 户 可 以 缩放 并 且 
移动 。 可 以 与 一 些 客户 端 联合 使 用 ,例如 MapBuilder (forwebpages) ,UDig,GVSig 等 。 本 
节 提 供 全 面 、 完 善 的 GeoServer 部 署 解 决 方案 ,包括 GeoServer 环境 搭建 ,地 图 数据 处 理 、 部 
署 地 图 数据 发 布地 图 服务 等 详细 介绍 。 


6.3.2 环境 搭建 


Geoserver 支持 在 不 同 的 操作 系统 环境 下 安装 配置 ,包括 Windows, MacOSX, Linux, 
Webarchive (WAR) 。 本 节 以 Windows 7 为 平台 安装 配置 相应 的 开发 环境 。 

搭建 GeoServer 环境 需要 安装 GeoServer Java] DK1. 5/1. 6, Tomcat5. 0/6. 0( 老 版 本 的 
GeoServer 需要 Tomcat 的 支持 ,最 新 版 本 的 GeoServer2. 0. 2 版 已 经 内 团 了 HTTP 服 
务 器 ) 。 

1. 下 载 .安装 Tomcat, JavaJDK1.5/1.6 

"Tomcat 和 Javajdk 都 可 以 通过 其 官方 网 站 下 载 , 环 境 变量 的 配置 可 参考 3. 2. 1 节 , 这 
里 不 再 详 述 。 这 里 将 JDK 安装 在 D 盘 的 ProgramFiles 下 ,如 图 6. 3-1 所 示 。 

如 果 使 用 最 新 的 GeoServer2. 0. 2 版 本 ,就 不 需要 安装 Tomcat,GeoServer2. 0. 2 已 经 内 
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FEXLONEI CWCEXDUCLDESTENEENNEIDHUETZTEE] 


ae% BIA S ME MEE EE d E- meo 
EC 5| zm x 修改 日 其 am 大 小 
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E d jre7 2013/9/1 14:13 x 
i Sans 
O OneDrive 


| "Jp KKk12.0.25 PAH: 2013/9/1 14:13 
| xe 


已 选择 1 项 天 计算 机 


图 6.3-1 JDK 安装 目录 


置 了 HTTP 服务 器 。 

2. 下 载 .安装 GeoServer 

GeoServer 是 由 OpenGISWeb 服务 器 规范 的 J2EE 实现 ,利用 GeoServer 可 以 方便 地 发 
布地 图 数据 ,允许 用 户 对 特征 数据 进行 更 新 、 删 除 、 插 入 操作 ,通过 GeoServer 可 以 比较 容易 
地 在 用 户 之 间 迅 速 共享 空间 地 理 信息 。GeoServer 是 社区 开源 项 目 , 可 以 直接 通过 社区 网 
站 下 载 ,详情 可 查看 本 文档 末 的 资源 表 。 

GeoServer 兼容 WMS 和 WFS 特性 ; 支持 PostGIS、Shapefile、ArcSDE、Oracle、VPF、 
MySQL、MaplInfo; 支持 上 百 种 投影 ; 能 够 将 网 络 地 图 输出 为 JPEG、GIF、PNG、SVG、KML 
等 格式 ; 能 够 运行 在 任何 基于 J2EE/Servlet 容器 之 上 ; BEA MapBuilder 支持 AJAX 的 地 
图 客户 端 OpenLayers。 关 于 GeoServer, 更 多 信息 可 以 访问 百度 百科 或 官网 。 

安装 GeoServer 非常 简单 ,由 于 GeoServer 是 Java 编写 的 开源 项 目 , 故 GeoServer 的 运 
行 需要 有 JavaJDK 的 支持 ,也 就 是 上 一 步 所 安装 的 JavaJDK ,在 安装 GeoServer 的 同时 必须 
提供 JavaJDK 的 JRE 才能 完成 GeoServer 的 安装 。 

Windows 安装 程序 提供 了 一 种 简单 的 方法 来 设置 
GeoServer。 由 于 没有 配置 文件 来 编辑 或 命令 行 设 置 ,一 切 | GeoServer 
都 可 以 通过 Windows 的 图 形 用 户 界面 来 完成 。 

(1) 导航 到 在 GeoServer 的 下 载 页 面 http:// 
geoserver. org/display/GEOS/Download 。 

(2) 选择 要 下 载 的 GeoServer 版 本 。 如 果 不 确定 ,就 


选择 稳定 的 版 本 http://geoserver. org/display/GEOS/ 
Stable。 s Windows Installer. 国 APLDocuql 


(3) 单 击 Windows installer 链接 ,如 图 6. 3-2 所 示 。 iB... B... 


(4) 下 载 完成 后 ,启动 文件 双击 geoserver2.3.0. exe. 图 6.3-2 下 载 Windowsinstaller 
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(5) 在 欢迎 界面 (如 图 6. 3-3 所 示 ) 单 击 Next 按钮 。 


© GeoServer 230 Setup 9. eo = 


Welcome to the GeoServer 2.3.0 
Setup Wizard 


This wizard will guide you through the installation of 
GeoServer 2.3.0. 


ee fat vod on al ofr acia 
before starting Setup.This moke it possible o to update 
GeoServer er may 

computer. 


Please report any problems or suggestions to the GeoServer 
Users maiing list: geoserver-users@lists.sourceforge.net. 


lick Next to continue. 


Caz ) (cme | 


图 6. 3-3 ”安装 GeoServer 欢迎 界面 
(6) 阅读 许可 协议 ,然后 单 击 *I Agree” 按 钮 ,如 图 6. 3-4 所 示 。 


PE 


Please review the icense terms before instaling GeoServer © Geoserver 
230. 


Press Page Down to see the rest of the agreement. 


is distributed under the GNU General Public License Version 2.0 license: 


GeoServer , open geospatial information server 
Copyright (C) 2001 - 2012 The Open Planning Project dba OpenPlans 


Free Foundation; either. 

(at your option) any later version (collectively, "GPL 

IF you accept the tems of the agreement, dk Agree to continue. You must accept the 
agreement to 


install GeoServer 2.: 


Nullsoft Install System v2,46 


(sted (Gass) 


6.3-4 48 GeoServer 同意 界面 


(7) 选择 安装 的 目录 ,然后 单 击 Next 按钮 ,如 图 6. 3-5 所 示 。 

(8) 选择 开始 菜单 目录 的 名 称 和 位 置 .然后 单 击 Next 按钮 ,如 图 6. 3-6 所 示 。 

(9) GeoServer 需要 一 个 有 效 的 JRE 才能 运行 ,所 以 这 一 步 是 必需 的 。 安 装 程序 会 检 
查 你 的 系统 ,并 尝试 自动 填充 此 框 包含 在 你 的 %JAVA_HOME%% 变 量 的 路 径 。 单 击 Next 
按钮 配置 JDK 环境 ,如 图 6. 3-7 所 示 。 
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Ec NN S 
Choose install Location 
Choose the folder in which to install GeoServer 2.3.0. & Geoserver 


‘Setup wal install GeoServer 2.3.0 in the folowing folder. To install in a different folder, dick 
Browse and select another folder. Cick Next to continue. 


BD: Prosram Fles\ceoserves 30] | [mme] 


‘Space required: 121.3MB 
‘Space avaliable: 44.765 
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(stok J na> ) ome ] 


图 6.3-5 ”安装 GeoServer 目录 


Choose Start Menu Folder 
Choose a Start Menu folder for the GeoServer 2.3.0 shortcuts. È Geoserver 


‘Select the Start Menu folder in which you would like to create the program's shortcuts. You 
Can also enter a name to create a new folder. 


Java Runtime Environment 
Java Runtime Environment path selecton È Geoserver 


Please select the path to your Java Runtime Environment (JRE). 


1f you don't have a JRE installed, you can use the link below to go to Orade's website to 
download and install the correct JRE for your system. 


http://www. 


D: progam Flefiwelpe? [ Browse... | 
This path contains a valid JRE 


Nulsoft Install System v2.46 


图 6.3-7 安装 GeoServer 配 置 JDK 环境 


录 下 ,如 
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(10) 选择 放置 GeoserverData 目录 ,使 用 GeoServer 来 部 署 发 布 shp 格式 地 图 数据 为 
WMS 服务 ,需要 将 shp 格式 地 图 文件 复制 到 GeoServer 指定 的 地 图 数据 目录 下 ,在 最 新 版 
的 GeoServer 安装 中 就 可 以 指定 地 图 数据 的 存放 目录 ,其 默认 放置 在 GeoServer 的 安装 目 


图 6. 3-8 所 示 。 
二 ceosevr?2a0sepi ev 
Eee & Geoserver 


rectory wil be used. 


© Default data drectory. Wil be located at: 
D:\Program Files\GeoServer 2.3.0 data. 


@ Exstng data drectory: 


If you have an existing data directory, please select its path. Otherwise, the default data. 


D:\Program Files\GeoServer 2.3.0Vdata dir 
This path contains a valid data drectory 


Nullsoft Install System v2.46 
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图 6. 3-8 安装 GeoServer 配置 安装 目录 


C11) 输入 用 户 名 和 密码 。GeoServer 的 Web 管理 界面 需要 身份 验证 ,在 这 里 输入 用 户 


名 和 密码 会 变 成 系统 管理 员 , 上 默认 用 户 名 和 密码 为 admin / GeoServer。 输 入 完成 后 , 单 击 
Next 按钮 。 


单 击 Next 按钮 可 以 设置 用 户 名 和 密码 ,默认 为 admin 和 geoserver, 如 图 6. 3-9 所 示 。 
© Geoserver230 Setup E ee) 
GeoServer Administrator 
Set administrator credentials & Geoserver 
Set the username and password for administration of GeoServer. 
Username admin 
Password geoserver 
Mleoft Install System v2.46 
(sm [C net> )[ emm - 


图 6. 3-9 安装 GeoServer 设置 用 户 名 和 密码 
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(12) GeoServer 安装 的 时 候 提供 默认 的 用 户 名 (admin)、 密 码 (geoserver), 以 及 
GeoServer 管理 系统 的 访问 端口 号 (8080) 。 为 了 不 与 Tomcat 服务 器 8080 端口 冲突 ,这 里 
将 GeoServer 端口 配置 为 8081, 如 图 6. 3-10 所 示 。 


© GeoServer 230 Setup WE II 
GeoServer Web Server Port 
‘Set the port that GeoServer wil respond on & Geoserver 


Set the web server port that GeoServer wil respond on. 


Pot 8081 Valid range is 1024-65535. 


Nullsoft Install System v2.46 


(Cosme orem ) 
6.3-10 ”安装 GeoServer 服务 器 端口 配置 


(13) 选择 是 否 为 GeoServer, 手 动 运行 或 安装 为 服务 。 当 手动 运行 ,GeoServer 运行 就 
像 在 当前 用 户 的 下 一 个 标准 的 应 用 程序 。 当 安装 为 服务 ,GeoServer 整合 到 Windows 服 
务 , 从 而 更 易于 管理 。 如 果 在 一 台 服 务 器 上 运行 ,或 者 管理 的 GeoServer 作为 一 种 服务 , 选 
择 安装 为 服务 ; 否则 ,选择 手动 运行 。 完 成 后 , 单 击 Next 按钮 ,选择 安装 类 型 为 默认 ,如 
图 6. 3-11 所 示 。 


Kj GeoServer 2.3.0 Setup lev s 
Type of installation. 
Select the type of instalation & Geoserver 
‘Select the type of installation for GeoServer. If you are unsure of which option to choose, 
select the "Run manually" option, 


® Run manually 
Installed for the current user. Must be manualy started and stopped. 


© Install as a service 


Installed for all users. Wil run as as a Windows Service for greater security. 
Requires a 32 bit JRE. 


Nullsoft Install System v2.46 
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图 6. 3-11 安装 GeoServer 默认 配置 
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(14) 如 果 有 任何 变更 单 击 Back 按钮 。 和 否则 , 单 击 Next 按钮 ,然后 单 击 Install 安装 ,如 
图 6. 3-12 所 示 。 


i GeoServer 230 [zm x] 
Kasak = 
Ready to install 
GeoServer is ready to be installed & GeoServer 
Please review the settings below and dick the Back button if changes need to be made. Click 
the Instal button to continue. 
Instalaton drectory: D:\Program Files GeoServer 2.3.0 
Installation type: Run manualy 


Java Runtime Environment: D:\Program FiesWVavaVe7 


Data Drectory: Using existing data drrectory: 
D:\Program Files\GeoServer 2.3.0 lata dir 
Port: 8081 


Nullsoft Install System v2.46 


ET 


图 6.3-12 安装 GeoServer 完成 后 基本 信息 


(15) GeoServer 将 安装 在 系统 上 ,完成 后 单 击 Finish 按钮 以 关闭 安装 程序 。 

(16) 如 果 安 装 GeoServer 作为 一 种 服务 ,确认 已 经 在 运行 。 否 则 ,可 以 进入 开始 菜单 ， 
启动 GeoServer。 

(Q7) 导航 到 http; //LSERVER. URL ]: [端口 ]/GeoServer/( 例 如 http://localhost: 
8080/geoserver/ ) 来 访问 GeoServer 的 Web Administration Interface。 如 果 看 到 GeoServer, 那 
么 表示 GeoServer 安装 成 功 ,如 图 6. 3-13 AS. 


© > Q f$ D localhost:8081/geoserver/web/ 


Username Password Remember me Loom 


GeoServer 
Welcome 
‘About & Status dius 
@ About GeoServer 
p ‘Tis GeoServer belongs to The ancient geographes IN dein plius 
Data 
[ren Thi GeoServer instance is running version 2.3.0. For more information please contact the rad 
somnia wes 
Denos m 
n 
i 
wes 


6. 3-13 ”安装 GeoServer 完成 后 访问 欢迎 界面 


3. 下 载 .安装 uDig 
uDig 是 一 个 opensource (EPL and BSD) 桌 面 应 用 程序 框架 ,构建 在 EclipseRCP 和 
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GeoTools( 一 个 开源 的 JavaGIS 工具 包 ) 上 的 桌面 GIS( 地 理 信息 系统 ); 它 是 一 款 开 源 桌面 
GIS 软件 ,基于 Java 和 Eclipse 平台 ,可 以 进行 shp 格式 地 图 文件 的 编辑 和 查看 ; 是 一 个 开 
源 空间 数据 查看 器 /编辑 器 ,对 OpenGIS 标准 ,关于 互联 网 GIS、 网 络 地 图 服务 器 和 网 络 功 
能 服务 器 有 特别 的 加 强 。uDig 提供 一 个 一 般 的 Java 平台 来 用 开源 组 件 建设 空间 应 用 。 其 
下 载 地 址 为 http://udig. refractions. net/download/。 

CD 下 载 完 成 后 ,双击 udig-1. 4. 0. win32. x86. exe 启动 文件 。 

(2) 在 欢迎 界面 上 , 单 击 Next 按钮 ,如 图 6. 3-14 所 示 。 


G udigi40setup — "9 Lec es 


uDig 


Welcome to the uDig 1.4.0 Setup 
Wizard 


This wizard wil guide you through the installation of uDig 


Please report any problems or sugestons for improvement 
to udig-devel@ists.refr 


uDig is distributed under a dual Ecipse Pubic 
Refractions BSD License. ‘Sheree deoa eoe fo ECP 
support. 


Cid Next to continue. 


图 6.3-14 安装 uDig 的 欢迎 界面 


(3) 阅读 许可 协议 ,然后 单 击 I Agree 按钮 ,如 图 6. 3-15 所 示 。 
Wl upigl40setup io x] 


license Agreement 
Please review the license terms before installing uDig 1.4.0. T Dig 


Press Page Down to see the rest of the agreement. 


[ECW/JP2 CODEC SDK End-User License Agreement 


IMPORTANTSREAD CAREFULLY: This ECW/JPC CODEC SOK End-User License A 


[You do not agree to the terms of this EULA, do not install or use the ~ 


Iyou scant a erma of bre ayeeman, dk Ages contre, You must accept he 
to install uDig 1.4.0. 


Nullsoft Install System v11-Mar-2012.cvs 


[sek | iagee | ( cmm 


6.3-15 ”安装 uDig 的 同意 界面 
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(4) 选择 安装 目录 ,然后 单 击 Next 按钮 ,如 图 6. 3-16 所 示 。 


Choose install Location. ‘ 
Choose the folder in which to install Dig 1.4.0. GS uDig 


‘Setup wil install uDig 1.4.0 in the following folder. To install in a different folder, cick Browse 
‘and select another folder. Click Next to continue. 


(sme [meno |] (Come | 


6.3-16 安装 uDig 地 址 目录 


O) 选择 开始 菜单 目录 的 名 称 和 位 置 ,然后 单 击 Next 按钮 ,如 图 6. 3-17 所 示 。 


Bp uDig140 setup DO Lo x] 
Choose Start Menu Folder 


Choose a Start Menu folder for the uDig 1.4.0 shortcuts. T3 uDig 


€—— OS E i 
‘can also enter a name to create a new folder. 


pel Tomcat 7.0 Tomcat? 
Corkman 


Games 
E Do not create shortcuts 
Nulsoft Install System v1 1-Mar-2012.cvs 


(«Bad | Instal | [ Cancel | 


6.3-17 安装 uDig 开始 文件 


到 此 为 止 ,基于 GeoServer 的 地 图 部 署 环 境 基 本 搭建 完成 .后 面 将 详细 介绍 如 何 基于 
uDig 地 图 数据 查看 、 编 辑 以 及 地 图 样式 导出 等 功能 。 


6.3.3 地 图 数据 处 理 


GeoServer 只 支持 发 布 ArcGIS 格式 的 地 图 数据 , 即 shp 格式 的 地 图 数据 。 如 果 是 第 三 


方 厂商 提供 的 地 图 数据 , 则 需要 进行 一 次 地 图 数据 格式 转化 。 这 里 主要 介绍 如 何 查看 、 编 辑 
地 图 数据 的 应 用 。 
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这 里 的 地 图 文件 选用 uDig 官网 所 提供 的 地 图 数据 文件 ,下 载 地 址 为 http: //udig. 
refractions. net/ ,下 载 压缩 包 地 图 文件 名 为 udigdata_1_3. zip, 解 压 后 可 以 看 到 数据 文件 ,如 
图 6. 3-18 所 示 。 


名 称 日 期 mm 
DD 10m admin 0 countries.dbf 2011/1/29 3:54 DBF 
DD 10m admin 0 countries.prj 2011/1/29 3:12 PRI 2 
C) 10m admin 0 countries.qix 2011/7/8 0:33 ax 
C) 10m_admin_0_countries.shp 2011/1/29 3:54 SHP 
L) 10m admin 0 countries.shx 2011/1/29 3:54 SHX 
癌 10m admin 1 states provinces shp.dbf 2011/1/27 1:49 DBF 
C) 10m admin 1 states provinces shp.prj 2011/1/27 1:49 PRI Xr 
癌 10m admin 1, states provinces shp.gix — 2011/7/13 2:17 ax 
C) 10m admin 1 states provinces shp.shp 2011/1/27 1:49 SHP 
C 10m_admin_1_states_provinces_shp.shx 2011/1/27 1:49 SHX 
L 10m geography marine polys.dbf 2011/1/30 12:37 DBF 


图 6.3-18 文件 预览 


1. 启动 uDig 
GeoServer 只 支持 发 布 ArcGIS 格式 的 地 图 数据 , 即 shp 格式 的 地 图 数据 。 在 使 用 


化 ,例如 将 MapInfo 地 图 数据 转 为 ArcGIS 的 shp 格式 地 图 数据 ,需要 使 用 MapInfo 提供 的 
工具 进行 转换 。 操 作 非 常 简单 ,这 里 不 做 详细 介绍 。 

(1) 从 桌面 Geospatial-~DesktopGIS-~uDig 启动 。 系 统 初始 化 将 花费 一 些 时 间 。 

(2) 欢迎 界面 ,首次 启动 时 ,欢迎 界面 将 展示 教程 .文档 和 项 目 网 站 信息 。 

(3) 单 击 箭头 形 的 Workbench 图 标 ( 右 上 角 ) 开 启 主 界面 ,如 图 6. 3-19 所 示 。 


— = = - m = bm da @ do 0) 
‘ie EG Vae Mey Dus Weder Vp ———— 
obeng 
| Poi 2 Fatal] =o peso) 
Welcome to uDig 
om 
Catenin i, 
ter - rr T | =O 
Tocat 
EXTEPT gu mu 
Wats 
Pode new 
m— 
ER am 
oa 
[CT ELSE IUIS — == $978 
| nap dig retractons nevconfuence/ dispiay/DA TA Home testionid -DXCC] MAE ACDEBEBSAA]4TEDALBFLICS. 
502 Pere 15 
Proxy Error f 
Te poy server received ta epee aman team sre 
Tapa cnl hdi e pet. 
| OEF ramcn DATA ee, timi DICCIAMACDEABESA I2 UEDALIBELIC. 


图 6.3-19  uDig 初始 界面 


178 «| WebGIS 工 程 项 目 开 发 实践 


(4) 在 主 界面 菜单 栏 选 择 Hel p Welcome 可 以 回 到 欢迎 界面 。 
(5) 主 界面 提供 了 一 种 编辑 面板 (显示 地 图 ) 和 信息 面板 (显示 与 地 图 和 要 素 有 关 的 


E A 10m land 


6.3-20 uDig 界面 布局 


2. Map 工具 介绍 

在 地 图 编辑 界面 中 ,顶部 导航 工具 栏 的 工具 可 用 于 移动 和 缩放 视野 。 

COD 缩放 愉 是 默认 工具 : 

CD 拖 电 放大 到 指定 区 域 ; 

© 右键 缩小 ,右键 拖 忠 将 控制 当前 视野 在 缩放 后 的 范围 。 

(2) 平移 由 工具 用 于 移动 视野 。 

(3) 其 他 工具 : 

© 全 局 试图 ; BY 

© 放大 明和 缩小 万 一 一 每 次 动作 的 比例 可 以 调节 ; 

© 回 退 各 和 前 进 G> 一 一 可 以 返回 之 前 的 设置 。 

3. 使 用 uDig 导入 shp 格式 数据 

新 建 工程 ,命名 为 “world” 读 取 Live 系统 上 内 建 的 数据 集 , 数 据 集 从 udig 官网 上 下 载 
(http://udig. refractions. net/) 。 压 缩 包 名 称 为 data_1_3, 然 后 解压 文件 。 
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CD 新 建 工程 ,如 图 6. 3-21 所 示 。 
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图 6.3-21 新 建 uDig 工程 


(2) 从 菜单 选择 Layer Add 打开 AddData 界面 。 
(3) 从 数据 来 源 (datasources)data_1_3 选择 Files, 如 图 6. 3-22 所 示 。 
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6.3-22 ”添加 地 图 数据 


(4) 单 击 Next 打开 文件 对 话 框 。 
(5) 从 data 1 3 数据 文件 中 选择 10m_admin_0_countries. shp. 
(6) 单 击 Open 打开 。 
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启动 一 个 新 的 编辑 器 ,其 默认 名 称 和 投影 是 根据 源 文件 设 定 的 。 同 时 ,Catalogview 显 
示 了 数据 文件 10m_admin_0_countries. shp。 这 个 面板 显示 当前 uDig 使 用 的 数据 。 在 
Layers 图 层 表 显示 了 一 个 图 层 。 该 面板 可 以 更 改 图 层 顺序 和 样式 。 在 Projects 工程 面板 
可 以 看 到 当前 工程 是 projects 二 10m_admin_0_countries。 用 户 可 以 同时 操作 多 个 工程 ,各 
个 工程 也 可 以 同时 使 用 多 个 地 图 视图 。 

(7) 从 文件 管理 器 打开 一 /data_1_3 HR. 

(8) 将 NE1_50M_SR_W. tif 拖 息 到 地 图 视图 即 可 添加 新 图 层 。 图 层 表 显 示 了 图 层 的 
释 压 顺序 ,当前 NE1_50M_SR_W 位 于 10m admin 0 countries 之 上 。 

(9) 选择 NE1_50M_SR_W .tif 图 层 拖 电 至 列表 底部 ,如 图 6. 3-23 所 示 。 


6.3-23 ” 拖 折 图 层 添加 地 图 数据 


4. 使 用 uDig 编辑 shp 格式 数据 

(D 使 用 uDig 打开 shp 格式 地 图 文件 ,支持 同时 打开 多 个 shp 格式 地 图 数据 文件 。 
打开 单个 地 图 数据 文件 以 地 图 数据 文件 的 地 图 风格 呈现 出 来 ,如 图 6. 3-24 所 示 。 如 果 
打开 多 个 地 图 数据 文件 , 则 按照 地 理 坐标 确定 图 层 位置 的 图 层 重 秋 呈 现 , 如 图 6. 3-25 
所 示 。 

(2) 打开 shp 格式 地 图 数据 文件 后 ,通过 uDig 的 图 层面 板 就 可 以 查看 所 选择 的 shp 地 
图 数据 文件 中 所 包含 的 地 图 图 层 信息 ,当选 中 某 个 图 层 后 就 可 以 通过 Table 面板 查看 该 图 
层 所 对 应 的 一 些 详细 数据 信息 ,如 图 6. 3-26 所 示 。 

5. 修改 shp 格式 数据 样式 

选择 project 二 10m_admin_0_countries ,双击 打开 。 

(1) 选择 countries 图 层 。 

(2) 右 击 10m_admin_0_countries 选择 ChangeStyle 打开 StyleEditor 样式 编辑 器 。 
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(3) 调整 该 图 层 的 几 个 样式 设置 ,如 图 6. 3-27 所 示 。 

CD 边界 线 : 单 击 Border 选择 颜色 (color) 并 调整 。 

@ 填充 : 单 击 Fill 并 取消 enable/disablefill 可 关闭 填充 。 

© 标注 : 单 击 Labels 选择 enable/disablelabeling 并 选中 NAME 字段 用 于 标注 。 
(4) 单 击 Apply 应 用 样式 ,在 Layer 视图 中 的 这 染 结 果 会 更 新 。 
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图 6.3-27 修改 shp 格式 数据 样式 


(5) 单 击 Close 关闭 。 

如 果 图 层 较 多 ,编辑 样式 时 可 能 难以 看 清 效果 。 单 击 Map 一 Mylar,Layer 试图 关闭 一 
些 图 层 以 有 助 于 编辑 。 再 次 选取 Map Mylar 可 以 关闭 这 一 效果 ,如 图 6. 3-28 所 示 。 

通过 uDig 工具 可 以 对 地 图 数据 进行 查看 、 编 辑 , 这 是 地 图 数据 部 署 中 对 地 图 数据 进行 
纠 错 处 理 的 不 可 缺少 的 工具 。 

6. 从 uDig 导出 shp 格式 数据 样式 

uDig 提供 了 非常 强大 的 地 图 数据 编辑 功能 ,实际 上 应 用 最 多 的 就 是 使 用 uDig 编辑 shp 
格式 的 地 图 数据 ,从 中 提取 样式 文件 。 目 的 其 实 很 简单 ,就 是 为 了 修改 编码 ,通常 默认 的 文 
字 编 码 发 布 出 的 WMS 服务 呈现 出 来 的 地 图 标签 中 是 乱码 。 通 过 图 层 的 ChangeStyle 功能 
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图 6.3-28 多 图 层 Mylar 分 层 查看 


选项 就 可 以 进入 图 层 的 样式 编辑 器 。 

通过 可 视 化 编辑 器 将 修改 后 的 样式 导出 为 样式 文件 (sld) ,在 发 布地 图 数据 的 时 候 就 可 
以 使 用 编辑 后 的 样式 到 对 应 的 地 图 图 层 , 从 而 解决 中 文 标签 乱码 问题 ,如 图 6. 3-29 和 
图 6. 3-30 所 示 。 
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图 6. 3-29 修改 图 层 样式 
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图 6. 3-30 导出 修改 后 图 层 样式 


到 此 为 止 ,基于 uDig 进行 地 图 数据 编辑 处 理 介 绍 完毕 ,当然 这 里 只 是 简单 的 介绍 ,下 一 
节 介绍 如 何 使 用 GeoServer 进行 地 图 数据 部 署 。 


6.3.4 部 署 地 图 数据 


本 节 正 式 介绍 基于 GeoServer 的 地 图 数据 部 署 实现 ,前 提 条 件 为 搭建 有 GeoServer 环 
境 。 实 际 上 ,基于 GeoServer 部 署 shp 格式 的 地 图 数据 非常 简单 ,对 于 GeoServer 对 应 的 磁 
盘 物 理 层 主 要 就 是 一 个 地 图 数据 目录 的 概念 ,对 于 GeoServer 应 用 系统 来 说 则 有 三 大 重要 
知识 点 ,分别 为 : 工作 空间 (workspace) ,存储 器 (store) 和 地 图 图 层 (layer)。 

1. 启动 GeoServer 

C) 在 菜单 中 选择 GeoServer2. 3. 07 StartGeoServer, 

(2) 稍 等 片刻 ,系统 将 会 启动 。 

G) 访问 位 于 http://localhost:8081/geoserver/web 的 系统 界面 ,如 图 6. 3-31 所 示 。 

(4) 开启 GeoServer 界面 后 ,使 用 用 户 名 admin 和 密码 geoserver 登录 ,管理 界面 如 
图 6. 3-32 Stas. 

(5) * Data 数据 * 面板 中 的 LayerPreview 连接 可 以 用 于 预览 服务 中 载 入 的 数据 ,如 
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图 6. 3-31 ”访问 GeoServer 界面 
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图 6.3-32 登录 GeoServer 界面 


图 6. 3-33 所 示 。 

(6) 在 页 面 底部 nurc: Arc. Sample ‘i OpenLayers, 可 以 用 OpenLayers 开启 示例 数 
据 的 显示 ,如 图 6. 3-34 所 示 。 

CD) 该 界面 的 缩放 可 以 用 三 种 方式 控制 : 

CD 单 击 左 侧 的 缩放 尺 ,高 位 对 应 较 大 的 比例 尺 ; 

© 使 用 鼠标 滚轮 ,向 前 放大 ,向 后 缩小 ; 

© 按 住 Shift 键 , 并 拖 电 一 个 范围 框 ,界面 将 尽 可 能 地 以 相 适 应 的 缩放 显示 , 同 理 可 以 
查看 其 他 数据 。 
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6.3-34 OpenLayers 地 图 数据 预览 


2. GeoServer 地 图 数据 目录 

地 图 数据 目录 (Data Directory) 就 是 地 图 数据 的 存放 目录 ,在 6. 3. 1 节 中 介绍 环境 搭建 
的 时 候 就 提 到 过 地 图 数据 目录 这 个 概念 ,安装 GeoServer 的 时 候 就 已 经 指定 了 地 图 数据 目 
录 的 位 置 。 
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部 署 地 图 数据 非常 简单 ,首先 需要 将 地 图 数据 文件 (shp 地 图 数据 文件 ) 复 制 到 


GeoServer 的 数据 目录 (安装 GeoServer 的 时 候 
指定 的 地 图 数据 目录 ) 下 面 ,因为 只 有 将 地 图 数 
据 放 到 此 目录 下 ,GeoServer 后 台 才 能 发 现 shp 
的 地 图 数据 文件 (建议 使 用 英文 命名 地 图 数据 
文件 ) ,如 图 6. 3-35 所 示 。 

需要 部 署 的 地 图 数据 必须 放置 在 
GeoServer 提供 的 地 图 数据 目录 之 下 ,图 6. 3-36 
就 是 将 待 部 署 发 布 的 shp 格式 地 图 数据 放 在 在 
GeoServer 地 图 数据 目录 下 名 为 “data_1_3” 的 


点 GeoServer Data Directory 


目录 中 的 。 需 要 特别 注意 这 里 的 “data_1_3”, 在 
使 用 GeoServer 进行 地 图 数据 部 署 发 布 的 时 候 
(创建 存储 器 ) 需 要 使 用 到 此 名 字 (data_1_3)。 
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图 6.3-36 "data 1 3” 地 图 数据 目录 


最 新 版 (版 本 号 : 2. 0. 2) 的 GeoServer 全 面 改善 了 shp 格式 地 图 数据 的 发 布 ,并 增加 了 
OpenLayers 方式 的 地 图 数据 发 布 预 览 功 能 ,并 将 地 图 数据 导出 为 KML 或 GML 等 格式 的 


数据 。 下面 详 细 介绍 这 些 功能 。 
3. 工作 空间 


最 新 版 的 GeoServer 修改 了 老 版 本 的 “目录 ”为 “工作 空间 ”(workspace) ,工作 空间 存放 
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着 多 个 数据 存储 器 。 成 功 登 录 GeoServer 管理 系统 后 就 可 以 从 左边 的 功能 导航 处 看 到 “ 工 
作 空 间 ” 选 项 。 工 作 空间 管理 平台 如 图 6. 3-37 所 示 。 
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图 6.3-37 工作 空间 预览 


要 发 布地 图 数据 为 WMS 服务 ,首先 得 建立 工作 空间 (也 可 以 使 用 现 有 的 工作 空间 ) SR 
后 建立 数据 存储 器 ,最 后 在 存储 器 里 面 发 布地 图 数据 。 要 想 创建 工作 空间 可 以 直接 通过 管 
理 平台 界面 的 Add new workspace 进入 工作 空间 创建 界面 ,如 图 6. 3-38 所 示 。 
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图 6. 3-38 工作 空间 创建 
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编辑 工作 空间 和 创建 工作 空间 一 样 简单 .可 以 直接 从 工作 空间 管理 列表 界面 进入 工作 
空间 编辑 界面 ,如 图 6. 3-39 所 示 o 
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图 6.3-39 工作 空间 编辑 


4. 存储 器 
基于 工作 空间 的 存储 器 (store) ,维护 着 和 地 图 数据 目录 的 映射 关系 。 可 以 直接 通过 
GeoServer 左边 的 功能 导航 进入 存储 器 管理 界面 ,如 图 6. 3-40 所 示 。 
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图 6.3-40 ”存储 器 预览 


如 图 6. 3-40 所 示 ,在 存储 器 管理 界面 中 单 击 Add new Store 就 可 以 导航 到 创建 存储 器 
界面 ,完成 存储 器 到 地 图 数据 目录 的 映射 ,为 后 面 发 布地 图 图 层 做 准备 ,如 图 6. 3-41 所 示 。 
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Features publshed by the server, and the abity to perform transactons on the server (when supported / alowed). 


Raster Data Sources 


al rakes a drectory of shapefiles and exposes t as a data store 


© About GeoServer 


È ArcGrid - Arc Grid Coverage Format 
S GeoTIFF - Tagged Image Fle Format wth Geographic information 
"8 Gtopo30 - Gtopo30 Coverage Format 

B IrageMosaic - krage mosaicking pugn 

"8 Workdirmage - A raster fle accompanied by a spatial data fle 


Other Data Sources 


Wi Coverage Access 
Tle Caching Me WHS - Cascades a remote Web Map Service 
M Tie Layers 


图 6. 3-41 创建 存储 器 


通常 使 用 Directory of Spatialfiles, 也 就 是 以 目录 为 单位 进行 shp 格式 地 图 数据 的 部 
署 , 如 图 6. 3-42 所 示 。 


New Vector Data Source 


Add a new vector data source 


Directory of spatial fies (shapefiles) 
Takes a directory of shapefiles and exposes it as a data store 


Basic Store Info 


Directory of shapefiles * 
file:data/example extension Browse... 
DBF files charset 


1S0-8859-1 5 


@ Create spatial index ff missing/outdated 


© Use memory mapped buffers 
@ Cache and reuse memory maps 


图 6. 3-42 存储 器 数据 部 署 
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按照 GeoServer 的 约定 ,一 个 数据 存储 器 可 以 部 署 一 个 独立 的 shp 格式 地 图 数据 文件 ， 
也 可 以 部 署 一 个 目录 的 shp 格式 地 图 数据 格式 。 

需要 特别 注意 ,“Directory of shapefiles” ”指向 存放 需要 部 署 的 地 图 数据 的 目录 ,地 址 
格式 为 “file:” 十 “GeoServer 的 地 图 数据 目录 ”。 例 如 ,地 图 数据 放 在 D:\ProgramFiles\ 
GeoServer2. 3. 0\data_dir\data\data_1_3 下 ,那么 在 建立 存储 器 的 时 候 的 URL 应 该 为 file: 
data/ data_1_3, 最 终 的 配置 如 图 6. 3-43 所 示 。 


New Vector Data Source 


Add a new vector data source 


Directory of spatial files (shapefiles) 
Takes a directory of shapefiles and exposes it as a data store 


Basic Store Info 
Workspace * 

cite [z] 
Data Source Name * 
data 1 3 
Description 


国 Enabled 


Connection Parameters 

Directory of shapefiles * 

file:data/data 1 3 Browse... 
DBF files charset 


1S0-8859-1 加 


Æ Create spatial index if missing/outdated 


© Use memory mapped buffers 


& Cache and reuse memory maps 


6. 3-43 ”存储 器 数据 部 署 


5. 地 图 图 层 

地 图 图 层 (layer) 主要 就 是 管理 部 署 在 GeoServer 里 面 的 地 图 数据 中 的 图 层 元 素 , 通 过 
地 图 图 层 管理 列表 可 以 非常 清楚 地 看 到 地 图 图 层 的 类 型 .所 属 工作 空间 、 所 属 存 储 器 、 图 层 
名 称 以 及 采用 的 SRS 标准 等 相关 信息 ,如 图 6. 3-44 所 示 。 

通过 图 层 管理 界面 的 Add a new resource 可 以 进入 图 层 类 型 (工作 空间 : 存储 器 ) 选 择 
界面 ,详细 如 图 6. 3-45 所 示 。 


192 «|| WebGIS 工 程 项 目 开 发 实践 


About & Status 
E Sever status 
=] GeoServer Logs 
* Contact information 
@ About GeoServer 


Layers 


Manage the layers being published by GeoServer 


© Add a new resource 
© Remove selected resources 


«| 1/2)[»| »» Resuts1 to 25 (out of 30 tems) 


地 图 数据 存储 器 管理 维护 与 地 图 数据 目录 对 应 的 地 图 图 层 数据 ,选择 了 对 应 的 图 层 存 
储 器 类 型 ,就 会 列 出 该 图 层 类 型 下 面 的 所 有 图 层 元 素 , 如 图 6. 3-46 所 示 。 
图 6. 3-46 所 示 的 成 功 发 布地 图 数据 图 层 为 地 图 服务 的 前 面 有 “/ ”标记 ,如 果 要 修改 已 


New Layer 


Add a new byer 


Add layer from 


nurc:arcGridSample 
nurcimg sample2 
nurc:mosaic 


nurc:worldimageSample 
sfsf 
sfsfdem 
tigernyc 
topp:states_shapefile 
topp:taz_shapes 


图 6. 3-45 


地 图 图 层 添 加 


发 布 的 地 图 图 层 , 可 以 使 用 再 次 发 布 功能 完成 。 


Data 
ise Prom om. Turc * EP56:4326 
© Workspaces as Dur dmg sample Pk50095 à EP56:32633. 
ao os ure mosaic mosaic * EPSG:4326 
Wb Layer Groups s ure workikmageSampie Img Sample * EPSG:4326 
@ styes 日 加 DpenGI5 ‘Opencis geo base * EPSG:4326 
pun aa openGI ‘Opensis geo cabe * PSG:4326 
ewes oa Opensis Opens eo cii engneermg * E56:4326 
Gwe 8 G OpenGIS. OpenGIS geo_connect_ine + EPSG:4326 
d ws aa openGIS openGI 9eo. connect wre * ES6:4326 
Settings ea OpenGIS. OpenGIS geo electrical Y EPSG:4326 
H Global 日 a OpenGIS ‘Opencis eo object base. z SG:4326 
JAL r- : 

Wi OR aa openGI 'OpenGis 9o. pipe bracket. * EpsG:4326 

© G OpenGIS OpenGIS geo pbe hole Ld .EPSG:4326- 

图 6.3-44 地 图 图 层 预 览 
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Layer Preview 


List of all ayers configured in GeoServer and provides previews in various formats for each. 
2)| > | >> Results 1 to 25 (out of 32 tems) a a = 

MP nurcArc Sample. OpentayersKML — Seedoe — — [e] 
BP nurcmosaic mosaic OpenLayers KML Select one 回 
nurclmg_Sample North America sample imagery Openlayers KML — [Seedoe [s 
[à ^ OpenGlS:geo base geo base Openizyers KML GML [Select one " 
回 ^ OpenGIS;geo cable geo cable OpenLayers KML GML Select one = 
国 OpenGiS:geo cw engmeerng geo cwi engneerng OpenLayers KML GML [Select one "m 
[d  OpenGlS:geo connect Ine 。 geo connect ine OpenLayers KML GML | Select one Iz 
[à ^ OpenGlS:geo connect wre — geo connect wre Openlayers KML GML [Seledone [s] 
[d ^ OpenGIS:geo electrcal geo electrical OpentayersKMLGML [seledoe — [s] 
[à ^ OpenGIS:geo object base geo object base OpenLayers KML GML | Select one m 
(d  OpenGlS:geo ppe bracket ^ geo pipe bracket Openlayers KML GML | Select one [zl 
[à — OpenGIS:geo ppe hole geo pipe hole Openizyers KML GML [Seledone — [el 


图 6. 3-46 ”地 图 图 层 预览 


下 一 节 详 细 介绍 如 何 发 布地 图 图 层 、. 应 用 地 图 样式 以 及 通过 OpenLayers 的 方式 预览 
地 图 数据 。 


6.3.5 发 布 Web 地 图 服务 (WMS) 


1. 发 布地 图 图 
前 面 介绍 了 基于 工作 空间 的 数据 存储 器 管理 的 地 图 图 层 , 以 及 可 在 图 层 列表 中 发 布地 图 
图 层 为 WMS 服务 。 对 于 已 经 发 布 过 的 地 图 数据 还 可 以 进行 修改 发 布 ,如 图 6. 3-47 所 示 。 


Bine] J 
* Do [o 
* po Pih agar 
* Lnd pr aan 
* one connate neim agar 
ba Qe coena wn [d 
* en aar 
* o cop b ron agar 
* pe po 
* 9e pee ie Puri 
* epos prt Pih agar 
* om poet ner Puish apar 


E) 


图 6.3-47 地 图 图 层 发 布 预览 
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从 图 6. 3-47 可 以 看 到 每 个 图 层 有 Published 属性 ,表示 当前 图 层 是 否 发 布 , 其 后 还 有 操 
作 连 接 Publishagain 或 Publish ,表示 对 已 经 发 布 的 图 层 进行 再 次 发 布 ,或 者 对 没有 发 布 的 
图 层 进行 发 布 。 

要 发 布地 图 图 层 ,可 以 在 图 层 列表 中 单 击 Publish 进入 图 层 发 布 界 面 。 需 要 注意 ,在 进行 
图 层 发 布 的 时 候 有 几 个 必 填 的 参数 ,分 别 为 DeclaredSRS, BoundingBoxes 等 。DeclaredSRS 表 
示 当 前 发 布 的 地 图 图 层 将 采用 何 种 地 理 空间 引用 标准 ,这 里 通常 都 是 使 用 EPSG:4326 标 
YE; BoundingBoxes 表示 当前 图 层 的 经 度 、 纬 度 范 围 , 这 两 项 值 可 以 直接 通过 GeoServer 提 
供 的 工具 自动 获取 ,如 图 6. 3-48 所 示 。 


[EPSG 4326 | LE 
SRS handling 


Force declared z) 


Minx Miny MaxX MaxY 
[105.695 [23:149 [106.794 1:208 
Comoute from data 


Compute from native bounds 


Feature Type Details 
Property Type Nillable. Min/Max Occurences 
the geom MukineStrng true on 


图 6.3-48 地 图 图 层 发 布 部 署 


导入 数据 步骤 如 下 : 

CD 这 里 的 示例 数据 是 data_1_3, 它 已 经 包含 在 OSGeo-Live 中 了 (/usr/local/share/ 
data/data_1_3/). 

(2) 要 发 布地 图 数据 为 WMS 服务 ,首先 需要 建立 工作 空间 (也 可 以 使 用 现 有 的 工作 空 
间 ) ,然后 建立 数据 存储 器 ,最 后 在 存储 器 里 面 发 布地 图 数据 。 要 想 创建 工作 空间 ,可 以 直接 
通过 管理 平台 界面 的 Add new workspace 进入 工作 空间 创建 界面 .命名 为 world, 如 图 6. 3-49 
所 示 。 

(3) 为 了 存储 服务 所 需 的 数据 .需要 创建 一 个 Store。 在 GeoServer 的 管理 员 页 面 选择 
Stores 并 单 击 Add new Store, 如 图 6. 3-50 所 示 。 

(4) 选择 Directory of spatialfiles 类 别 , 创 建 页 面 显示 ,如 图 6. 3-51、 图 6. 3-52 所 示 。 


New Workspace 
Configure a new workspace. 
Name 

world 


Namespace URI 
htto:twww.opengeospatial networid 
The namespace un assocated with this workspace 


Default Workspace 
a 


[owe [Cot 
图 6.3-49 工作 空间 创建 界面 
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WOOO O COO. 


DLL 


“Ses 


Bit a 


ow 
mm 
E 


yep 


Co of 14 mer) 


图 6. 3-50 ”创建 Store 


New data source 


Choose the type of data source you wish to configure 


Vector Data Sources 


à Drectory of spatial fles (shapefiles) - Takes a directory of shapefies and exposes t as a data store 
(à H2 - H2 Embedded Database 

G H2 (INDI) - H2 Embedded Database (INOT) 

à Orade NG (INDI) - Orade Database (INDI) 

(à PostGIS - PostGIS Database 

G PostGIS ONDI) - PostGIS Database (INDI) 

Gi Properties - Alows access to Java Property fles containing Feature mformation 

d Shapefie - ESRI(tm) Shapefies (*.shp) 

a web Feature Server - The WFSDataStore represents a connection to a Web Feature Server. This conne 
published by the server, and the abiity to perform transactions on the server (when supported / alowed). 


Raster Data Sources 
Jl ArcGrid - Arc Grid Coverage Format 
Al GeoTIFF - Tagged Image Fie Format with Geographic information 
A Gtopo30 - Gtopo30 Coverage Format. 


I IrmageMosaic - Image mosaickng plugin 
|B WorldImage - A raster fle accompanied by a spatal data fie 


Other Data Sources 


Al wus - cascades a remote Web Map Service 


SSCS EEE 


图 6. 3-51 存储 服务 所 需 的 数据 
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New Vector Data Source 


Add a new vector data source 


Directory of spatial fies (shapefies) 
Takes a drectory of shapefiles and exposes t as a data store 


Basic Store Info 


@ Enabled 


Connection Parameters 

Directory of shapefiles * 

file:dataldata_1_3 Browse... 
DBF files charset 


[soss E 
@ Create spatial index if missng/outdated 
© Use memory mapped buffers 
@ Cache and reuse memory maps 


6.3-52 存储 服务 所 需 的 数据 


(5) 输入 所 需 的 名 称 ( 例 如 data-1-3), 以 及 目标 目录 (例如 file: data/data_1_3)。 用 
Browse 按钮 选择 目标 目录 ,完成 后 单 击 Save 按钮 ,如 图 6. 3-53 所 示 。 


New Layer 
Add a new layer. 


You can create a new feature type by manually configuring the attribute names and types. Create new feature type... 
Here is a ist of resources contained in the store 'data 1 3'. Cick on the layer you wish to configure 


<<|| «| 1|» || >>| Results 1 to 12 (out of 12 tems) ^ Search 
10m admin 0 countries 


10m admin 1 states provinces shp Publish 
10m geography marine polys Publish 
10m_geography_regions_elevation_points Publish 
10m geography regions points Publish 
10m_geography_regions_polys Publish 
10m bkes Pubish 
10m land Publish 
10m ocean Publish 
10m_populated_places_smple Pubish 
10m rers bke centerines Pubish 
10m urban areas Publish 


_<<||_<|\1)|> || >> Results 1 to 12 (out of 12 items) 


6.3-53 ”发 布 新 添加 层 
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(6) 单 击 各 个 图 层 右 侧 的 publish 执行 发 布 ,界面 将 转 到 Layers” ,如 图 6. 3-54 Bros 。 


Edit Layer 

Edit layer data and publishing 

topp:iO0m admin O0 countries 

Configure the resource and publishing information for the current layer. 
Data | Publishing | Dimensions | Tie Caching 


Basic Resource Info 
Name 


10m admin 0 countries. 
Title 

10m. admin 0 countries 
Abstract 


Keywords 
Current. 
10m admin 0 countries 


图 6. 3-54 数据 部 署 


示例 数据 集中 的 很 多 信息 可 以 自动 识别 并 填 入 表格 。 在 Coordinate Reference System (A 
标 系统 ) 中 ,NativeSRS 原始 坐标 系 显 示 为 “UNKNOWN 未 知 ”"。 此 处 应 当 在 declaredSRS 名 义 
坐标 系 填 入 正确 的 值 ,使 得 GeoServer 能 够 对 数据 进行 定位 。 在 本 例 中 , 填 人 “epsg:4326” 
即 可 。 在 http://prj2epsg. org/search 可 以 用 “UNKNOWN” 右 侧 的 字符 串 查 询 对 应 的 
EPSG 标准 坐标 系 代码 。 单 击 Compute from data 和 Compute from native bounds 计算 地 
理 范围 参数 ,最 后 单 击 Save 保存 即 可 ,如 图 6. 3-55 所 示 。 

(7) 在 图 层 页 面 中 单 击 Addanewresource 可 以 加 入 其 他 的 数据 源 。 在 下 拉 菜 单 中 选择 
之 前 创建 的 data_1_3 可 回 到 示例 ,如 图 6. 3-56 所 示 。 

(8) 可 以 看 到 ,data_1_3 数据 里 面 的 10m_admin_0_countries BAK Ai. WA 6. 3-57 
Br 。 

(9) 在 LayerPreview( 图 层 预览 ) 内 预览 刚才 发 布 的 地 图 ,如 图 6. 3-58 所 示 

2. 发 布地 图 样式 

应 用 样式 主要 是 解决 中 文 编码 的 问题 以 及 某 些 地 图 数据 的 特别 处 理 。 通 常 可 以 修改 样 
式 文件 实现 ,这 里 大 多 数 的 图 层 使 用 默认 的 样式 也 不 会 有 问题 ,而 某 些 图 层 使 用 默认 的 样式 
却 不 能 正确 地 发 布 为 WMS 服务 ,需要 使 用 前 面 介 绍 的 通过 uDig 对 地 图 数据 的 样式 进行 编 
辑 并 导出 样式 文件 ,然后 在 GeoServer 中 发 布 新 的 样式 ,并 在 图 层 发 布 或 者 是 编辑 图 层 的 时 
候 就 使 用 自己 发 布 的 样式 。 
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Coordinate Reference Systems 

Native SRS 

UNKNOWN GCS WGS 1984... 
Declared SRS 

EPSG.4326 Find... | EPSG:WGS 84... 
SRS handling 

[Force declared "| 


Bounding Boxes 

Native Bounding Box 

Min X Min Y Max X Max Y 
-179.9997834891:|-89.99982838943 | 180.00000000000|83.633810934029 
Compute from data. 
Lat/Lon Bounding Box 
Min X Min Y Max X Max Y 
-179.9997834891:|-89.99982838943 | 180.00000000000| 83.633810934029 
Compute from native bounds 


Feature Type Details 

Property Type Nillable Min/Max Occur 
the_geom ‘MukiPolygon tue on 
ScaleRank Integer true oft 
LabelRank Integer true 0/1 
FeatureCla String true oft 
SOVEREIGNT string true ol 
SOV_A3 String true [7 
ADMO DIF Double. true oft 
LEVEL Double true oj 
TYPE String true on 
ADMIN String true oft 


6.3-55 数据 部 署 


New Layer 


Add a new layer 


Add layer from | 请 选择 M 


OpenGIS:OpenGIS 
nurc-arcGridSample 
nurcimg sample2 
nurc:mosaic 
nurc:worldlmageSample 
sfsf 

sfsfdem 

tigernyc 
topp:states_shapefile 
topp:taz_shapes 
world:data 1 3 


图 6.3-56 ”加 入 其 他 的 数据 源 
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New Layer 


Add a new layer 


‘Add layer from [world:data 1 3 u 


You can create a new feature type by manualy configuring the attrbute names and types. Create new feature type... 
Here is a ist of resources contained in the store 'data 1. 3'. Cick on the layer you wish to configure 


««|| <|| 2 | » | >> | Results 0 to 0 (out of 0 tems) & Search 
-* 10m admm 0 countries 

10m admin 1 states provinces shp 

10m geography mamme polys 


10m geography regions elevation points 
10m geography regions ponts 

10m geography regions polys 

10m lakes 

10m land 

10m ocean 

10m populated places simple 

10m rers bke centerines. 

10m urban areas 


<<|| <|| 1/5 || >> | Results 0 to 0 (out of 0 items) 


图 6.3-57 数据 发 布 界面 


J © Geoserver: Layer Previ x Y ll Opentayers map previ- x 
© $ Q ff D localhost:8081/geoserver/world/wms?service=WMS&version=1.1.0&reques| 


Scale = 1 : 279M -91.40609, 42.50102 
Click on the map to get feature info 


图 6. 3-58 地 图 数据 预览 


通过 uDig 修改 10m admin 0 countries 地 图 样式 ,如 图 6. 3-59 所 示 。 
在 uDig 界面 中 单 击 Export 可 以 输出 SLD 文件 .如 图 6. 3-60 所 示 。 
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图 6.3-59 通过 uDig 修改 地 图 样式 


z O 
^ [FE 
De - -一 
修改 日 其 Em 
2014/7/3 9:11 SLD 文件 


6.3-60 导出 地 图 样式 


在 GeoServer 管理 界面 中 选择 Styles(Data 面板 ) .并 单 击 Add New Style。 在 页 面 底 
部 单 击 Browse 可 以 浏览 之 前 创建 的 SLD 文件 。 选 中 后 单 击 Browse 旁边 的 Upload 可 导 
和信 该 文件 。 导 入 后 ,编辑 器 中 若 出 现 高 亮 的 错误 行 ,系统 可 以 执行 检查 并 提供 进一步 的 信 
息 。 若 不 需要 这 些 信息 ,可 以 直接 忽略 。 

通过 样式 列表 界面 的 Add a newstyle 可 进入 下 面 的 样式 发 布 界面 ,如 图 6. 3-61 所 示 。 
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New style 


Type a new SLD definition, or use an existing one as a template, or upload a ready made style from your file system. The editor can provide syntax 
highlight and be brought to full screen. Cick on the "validate" button to verify the style is a vali SLD document. 


Name 
new world 


Copy from existing style 


polygon T| Copy ... 
ac ug m [12 


SIT Styl TAT THT SRIRPT RUNS 
ld UserLayer> 
<cld:LayerFeatureConstraints> 
<c1d:FeatureTypeConstraint/> 
</s1d:LayerFeatureConstraints> 
<sld-UserStyle> 
<sld:Nane Default Styler</sld: Mane? 
Guides» 
Cald: IsDefeul OL /sld:IsDefaul t> 
<s1d:Featur eTypeStyle> 
Csld Wonexinple(/ 514: one? 
14 FeatureTypelBuneFenture /s14: FeatureTypeNane? 
1d: Semunti cTypeIdenti fi er?generi c: geometry / 31d: Senanti cTypeIdenti fi er? 


SWVOPSREGOREUSIT XRIRPGIGU RU 7S OPENS ED ET RUP TWF OPT 


51d Senanti cTypeI denti fi er?simple (514: Senanti cTypeIdenti fier? 
Gd Rule? 


‘1d PolygonSymboli zs 


isPareseter nam 
(sli Stroke> 
(314: PolygonSynbolizer) 


图 6.3-61 样式 发 布 界面 


样式 修改 XML 文件 代码 如 下 : 


<?xml version = "1.0" encoding = "UTF - 8"?> 
< sld: StyledLayerDescriptor xmlns = "http://www. opengis. net/sld" xmlns: sld = "http://www. 
opengis. net/sld" xmlns:ogc = "http://www. opengis. net/ogc" xnlns:gnl = "http://www. opengis. 
net/gnl" version = "1.0. 0"> 
< sld:UserLayer > 
< sld:LayerFeatureConstraints > 
< sld:FeatureTypeConstraint/> 
</sld:LayerFeatureConstraints > 
< sld:UserStyle» 
< sld: Name > DefaultStyler </sld: Name > 
<sld:Title/> 
< sld: IsDefault > 1 </sld:IsDefault > 
< sld:FeatureTypeStyle > 
<sld:Name > simple </sld:Name> 
<sld:FeatureTypeName > Feature </sld: FeatureTypeName > 
<sld:SemanticTypeIdentifier > 
generic: geometry 
</sld:SemanticTypeIdentifier > 
<sld:SemanticTypeIdentifier > simple </sld:SemanticTypeIdentifier> 
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<sld:Rule> 
<sld:PolygonSymbolizer > 

<sld:Fill> 

< sld:CssParameter name = "fill" 
# 0080C0 
</sld:CssParameter > 
< sld:CssParameter name = "fill- opacity"> 0.5 
</sld:CssParameter > 

</sld:Fill> 

<sld:Stroke> 
< sld:CssParameter name = "stroke"> 

# 80FF00 
</sld:CssParameter > 
</sld:Stroke> 
</sld:PolygonSymbolizer > 
</sld:Rule> 
</sld:FeatureTypeStyle > 
</sld:UserStyle > 
</sld:UserLayer > 
</sld:StyledLayerDescriptor > 


3. 应 用 地 图 样式 

应 用 地 图 样式 非常 简单 ,在 添加 地 图 图 层 或 者 编辑 地 图 图 层 的 时 候 , 单 击 左 侧 菜单 的 
Layers ,选择 所 需 图 层 ( 例 如 10m_admin_0_countries* ) , 单 击 Publishing 并 将 DefaultStyle 
修改 为 所 需 的 样式 。 预 览 效 果 如 图 6. 3-62 所 示 。 


Layers 


Manage the layers being published by GeoServer 
Q Add a new resource. 
© Remove selected resources 


[««][ «)[1 [2] [5 ]| >> | Results 26 to 31 (out of 31 tems) [& Search —— 


ox topp states_shapefile states * EPSG:4326 

Ge topp taz shapes tasmani cities v EPSG:4326 

au topp taz shapes tasmania roads v EPSG:4326 

Bx topp taz shapes tasmania state boundaries v EPSG:4326 

om topp taz shapes tasmana water bodies v EpsG:4326 

Bm word data 13 v EPSG:4326 
[<< ]| < ]{ 1 |{ 2) > || >> | Results 26 to 31 (out of 31 items) 


6.3-62 ”预览 图 层 效 果 


通过 Default style 功能 选项 进行 地 图 图 层 的 样式 设置 ,如 图 6. 3-63 所 示 。 

1) 预览 地 图 图 层 

通过 GeoServer 管理 界面 左边 的 功能 导航 Layer Preview 可 进入 图 层 阅 览 列 表 ,在 此 列 
表 中 部 分 类 型 地 图 图 层 提供 导出 为 KML 和 GML 格式 的 地 图 数据 ,如 图 6. 3-64 所 示 。 
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Layer Identifiers 
No layer identifiers so far 


Authority URLs for this WMS Layer 
No authority URLs so far 


图 6. 3-63 地 图 图 层 样式 设置 


OpenLayers KML Select one [zl 
OpenLayers KML Select one 加 
Openlayers KML GML {Select one [zl 


OpenLayers KML GML [Select one =] 
Opes [Saone [=] 
OpentayersKMLGML [Selectone [Æ] 
penises on [Sede — [s] 
Opentayers KML GML [Selectone — [s] 
OpentayersKMLGML [seedoe — — [s] 


‘Opentayers KML GML [Select one 1 


Layer Preview 
List of all layers configured in GeoServer and provides previews in various formats for each. 
|<<| «| 1/2) » || »» Results 1 to 25 (out of 32 tems) 
dB nur Sample A sample ArcGrid fle 
M nurcimosac mosaic 
@ — nurcimg Sample North America sample imagery. 
OpenGIS:geo base geo base 
(à  OpenGlS:geo cable geo cable 
OpenGIS:geo civi engineering geo civi engneerng 
(à ^ OpenGIS:geo connect ine — geo connect ine 
国 OpenGlS:geo connect wie ^ geo connect wire 

OpenGIS:geo electrical geo electrical 
OpenGIS:geo. object base geo. object base 

OpenGlS:geo pipe bracket ^ geo ppe bracket 
ri OpenGIS:geo pipe hole geo pipe hole 

6.3-64 预览 地 图 图 层 
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在 图 6. 3-64 中 单 击 图 层 所 对 应 的 OpenLayers 就 可 以 打开 对 应 的 地 图 图 层 的 预览 界 
面 ,图 层 列 表 的 地 图 图 层 是 为 了 测试 而 部 署 的 ,比如 需要 查看 刚 发 布 的 地 图 图 层 ,那么 直接 
预览 大 区 边界 地 图 图 层 就 可 以 了 ,也 就 是 图 中 名 为 "world:10m_admin_0_countries” 的 图 
层 , 如 图 6. 3-65 所 示 。 


V4 oeosever Layer Previe x Y ll Opentayers map previ- x Y lll OpenLayers map previ- x 


?Cl [n localhost:8081/geoserver/world/wms?service- WMS&wversion- 1.1.08&requg 


Scale = 1 : 279M 220.78123, -102.34264 
Click on the map to get feature info 


图 6.3-65 预览 地 图 


预览 地 图 图 层 , 实 际 上 就 是 加 载 了 单个 地 图 图 层 。 

2) 多 图 层 释 加 呈现 

在 访问 WMS 服务 的 时 候 通常 是 将 多 个 地 图 图 层 进行 释 加 组 合 ,完成 一 个 相对 完整 的 
地 图 界面 。 在 访问 WMS 服务 的 时 候 . 图 层 琶 加 非常 简单 ,就 是 在 WMS 请 求 地 址 的 layers 
参数 后 面 用 逗号 (,) 将 多 个 图 层 进行 分 割 。 下 面 的 WMS 服务 请 求 地 址 就 至 加 了 3 个 地 图 
Ae: 

http: //localhost :8081/geoserver/world/wms? service = WMS&version = 1. 1. O&request = GetMap&layers = 

world:10m admin 0 countries, world: 10m_lakes, world: 10m_ocean&styles = &bbox = — 179. 99978348919961, 


— 89. 99982838943765, 180. 0000000000001, 83. 63381093402974&width = 684&height = 330&srs = EPSG: 
4326&format = application/openlayers 


layers= world:l0m admin 0 countries. world: 10m_lakes. world:10m_ocean ,表示 此 


WMS Jig 55 itf zK Ji h = 4 Se P8 Fe] Je IAL TAY, d EH I CFR E 6. 3-66 所 示 。 


6.3.6 基于 Silverlight 技术 的 地 图 客户 端 实现 


本 节 介 绍 的 内 容 为 基于 Web 地 图 服务 (WebMapService, WMS) fi Silverlight 地 图 客 
户 端 实现 。 
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Scale = 1 : 279M -128.67169, 43.90727 
Click on the map to get feature info 


图 6.3-66 FE ERE SR 


1. DeepZoom 简介 

DeepZoom 技术 以 MultiScaleImage 控件 为 核心 ,其 内 部 有 一 个 MultiScaleTileSource 
类 型 的 源 属性 ,主要 用 于 设置 MultiScaleImage 控件 所 要 呈现 的 数据 源 。 基 于 Silverlight 
的 WebGIS 客户 端 实现 也 是 通过 MultiScalelmage 控件 来 实现 ,核心 就 在 于 通过 
MultiScaleTileSource 属性 针对 不 同 的 WebGIS 地 图 瓦 片 数据 (ImageTiles) 提供 商 为 
MultiScalelmage 控件 实现 一 个 数据 源 。 因 此 本 篇 所 要 做 的 工作 就 是 针对 WMS 服务 为 
MultiScalelmage 控件 实现 一 套 加 载 数据 源 的 算法 。 

2. WMS 服务 加 载 实 现 

实现 WMS 服务 加 载 的 算法 其 实 非常 简单 ,只 需要 了 解 WMS 发 布 的 方式 .WMS 地 址 
的 参数 组 成 结构 以 及 地 图 瓦 片 的 投影 原理 就 可 以 了 ,首先 需要 定义 一 个 盒子 对 象 作为 访问 
WMS 的 边界 参数 对 象 。 


public class BBox 
{ 
public intX ( get; set; } 
public intY { get; set; } 
public intWidth { get; set; } 
public intheight { get; set; } 
public BBox(intx, inty, intw, inth) 
{ 
this.X = x; 
this.Y - y; 
this.Width = w; 
this.Height - h; 
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关于 WMS 服务 加 载 的 详细 算法 需要 具备 GIS 理论 基础 才能 够 理解 其 实现 原理 ,这 里 
不 再 介绍 ,直接 给 出 实现 代码 : 


public class WMSTileSource : MultiScaleTileSource 
t 
public WMSTileSource() 
: base(int.MaxValue, int.MaxValue, 0x100, 0x100, 0) 
t) 
public constint TILE SIZE - 256; 
// 地 球 半径 
public constd ouble EARTH RADIUS = 6378137; 
// 地 球 周 长 
public constd ouble EARTH CIRCUMFERENCE = EARTH RADIUS * 2 * Math.PI; 
public consDouble HALF EARTH CIRCUMFERENCE = EARTH CIRCUMFERENCE / 2; 
//WMS 服务 地 址 
private const String TilePath = @" http://localhost: 8080/geoserver/wms? service = 
WMS&version = 1.1.0& 
request = GetMap&layers = cq:CQ County region,cq:CQ County region level& 
styles = &bbox = (0), (1), (2), (3)&width = 512&height = 421& 
srs = EPSG:4326&&Format = image/png" ; 
public String GetQuadKey(String url) 
{ 
var regex = newRegex(". * tiles/(. + )[.].*"); 
Match match = regex. Match(url) ; 
return match. Groups[1]. ToString (); 
} 
public BBoxQuadKeyToBBox(String quadKey, int x, in ty, int zoomLevel) 
{ 
char c = quadKey[0]; 
int tileSize = 2<< (18 - zoonLevel - 1); 
if (c == '0') 
{ 
y = y — tileSize; 


} 
else if (c == '1') 
{ 
y = y — tileSize; 
x = x + tileSize; 
} 
else if (c == '3') 
{ 
x = x + tileSize; 
) 
if (quadKey. Length> 1) 
{ 


return QuadKeyToBBox(quadKey. SubString (1), x, y,zoomLevel + 1); 
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return newBBox(x, y, tileSize, tileSize); 

) 

public BBoxQuadKeyToBBox(String quadKey) 

{ 
constintx = 0; 
constinty = 262144; 
return QuadKeyToBBox(quadKey, x, y, 1); 

} 

public Double XToLongitudeAtZoom(int x, int zoom) 

{ 
Double arc = EARTH CIRCUMFERENCE / ((1<< zoom) * TILE SIZE); 
Double metersX = (x * arc) - HALF EARTH _CIRCUMFERENCE; 
Double result = RadToDeg(metersX / EARTH RADIUS); 
return result; 

} 

public Double YToLatitudeAtZoom(int y, int zoom) 

{ 
Double arc = EARTH CIRCUMFERENCE / ((1<< zoom) * TILE SIZE); 
Double metersY = HALF EARTH CIRCUMFERENCE 一 (y * arc); 
Double a = Math.Exp(metersY * 2 / EARTH RADIUS); 
Double result = RadToDeg(Math.Asin((a — 1) / (a * 1))); 
return result; 

} 

public Double RadToDeg( Double d) 

{ 
return d / Math.PI * 180.0; 

) 

) 


前 端 通过 一 个 按钮 事件 驱动 触发 加 载 WMS 服务 ,按钮 的 XML 代码 如 下 : 
< Button Content = "WMS 图 层 " Height = "30" Width = "80" Name = "btnWms”Click = "btnWms_Click"/> 


通过 这 一 节 , 我 们 对 地 图 服务 器 Geoserver 有 了 大 致 的 了 解 , 接 下 来 介绍 地 图 客户 端 
Openlayers 的 相关 知识 。 


6.4 地 图 客户 端 OpenLayers 


OpenLayers 使 得 Web 开发 人 员 很 容易 地 在 任何 Web 页 面 中 嵌入 多 种 来 源 的 动态 地 
图 。OpenLayers 提供 类 似 GoogleMapserverAPI 的 丰富 的 制图 工具 箱 和 插件 集合 。 所 有 
工具 和 插件 都 运行 于 浏览 器 内 部 ,使 得 OpenLayers 易于 安装 ,不 依赖 于 任何 服务 器 端的 额 
外 支撑 。 其 主要 特点 如 下 : 

(1) 完全 采用 JavaScriptAPl; 

(2) 支持 标准 化 和 定制 的 同 服务 器 进行 交互 的 协议 ; 
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(3) 可 简单 定制 用 户 界面 的 工具 ; 

(4) 支持 浏览 器 内 置 数据 泻 染 (采用 SVG, VML, orCanvas ER) ,支持 开发 高 级 浏览 
器 内 置地 图 ; 

(5) 支持 从 多 种 数据 源 载 人 地 图 图 层 : 

CD 商业 图 层 : Google, Bing. Yahoo, 

© OGC 标准 规范 : WMS, WMTS, WFS, WFS-T,GeoRS,GML。 

© 其 他 : ArcGIS, Images. MapGuide, MapServer, TileCache。 

CD 解析 多 种 数据 格式 的 矢量 数据 和 元 数据 的 能 力 : Atom, ArcXML, GeoJSON, 
GeoRSS, KML.OSM.SLD.WMTS, 

OpenLayers 是 一 个 用 于 开发 WebGIS 客户 端的 JavaScript 1. OpenLayers 支持 的 地 
图 来 源 包 括 GoogleMaps, Yahoo, Map, VirtualEarth 等 ,用 户 还 可 以 用 简单 的 图 片 地 图 作为 
背景 ,与 其 他 的 图 层 在 OpenLayers rP 3t {7 JIll. OpenLayers 在 这 方面 提供 了 非常 多 的 选 
择 。 此 外 ,OpenLayers 实现 访问 地 理 空间 数据 的 方法 都 符合 行业 标准 。OpenLayers 支持 
OpenGIS 协会 制定 的 WMS( WebMappingService) 和 WFS(WebFeatureService) 等 网 络 服 
务 规 范 ,可 以 通过 远程 服务 的 方式 ,将 以 OGC 服务 形式 发 布 的 地 图 数据 加 载 到 基于 浏览 器 
的 OpenLayers 客户 端 中 进行 显示 。OpenLayers 采用 面向 对 象 的 开发 方式 ,并 使 用 来 自 
Prototype. js 和 Rico 中 的 一 些 组 件 。 

OpenLayers 除了 可 以 在 浏览 器 中 帮助 开发 者 实现 地 图 浏览 的 基本 效果 ,比如 放大 
(ZoomIn) 缩小 (ZoomOut) ,平移 (Pan) 等 常用 操作 之 外 ,还 可 以 进行 选取 面 . 选 取 线 .要素 
选择 .图 层 琶 加 等 不 同 的 操作 ,甚至 可 以 对 已 有 的 OpenLayers 操作 和 数据 支持 类 型 进行 扩 
充 ,为 其 赋予 更 多 的 功能 。 例 如 , 它 可 以 为 OpenLayers 添加 网 络 处 理 服务 WPS 的 操作 接 
口 ,从 而 利用 已 有 的 空间 分 析 处 理 服 务 来 对 加 载 的 地 理 空间 数据 进行 计算 。 同 时 ,在 
OpenLayers 提供 的 类 库 中 , 它 还 使 用 类 库 Prototype. js 和 Rico 中 的 部 分 组 件 ,为 地 图 浏览 
操作 客户 端 增 加 Ajax 效果 。 


6.4.1 开源 地 图 框架 介绍 


OpenLayers 地 图 如 图 6. 4-1 所 示 。 


图 6.4-1 OpenLayers 地 图 


62 OpenGIS |P 209 


OpenLayers 是 由 MetaCarta 公司 开发 的 ,用 于 作为 WebGIS 客户 端的 JavaScript 包 ， 
通过 BSD License 发 行 。 它 实现 访问 地 理 空间 数据 的 方法 都 符合 行业 标准 ,比如 OpenGIS 
的 WMS 和 WFS 规范 ,OpenLayers 采用 面向 对 象 的 JavaScript 开发 方式 ,同时 借用 了 
Prototype 框架 和 Rico 库 的 一 些 组 件 。 

采用 OpenLayers 作为 客户 端 不 存在 浏览 器 依赖 性 。 由 于 OpenLayers 采用 JavaScript 
语言 实现 ,而 应 用 于 Web 浏览 器 中 的 DOM( 文 档 对 象 模型 ) 由 JavaScript 实现 ,同时 , Web 
浏览 器 (比如 IE FF 等 ) 都 支持 DOM, 

OpenLayers APIs 采用 动态 类 型 脚本 语言 JavaScript 编写 ,实现 了 类 似 于 Ajax 功能 的 
无 刷新 更 新 页 面 ,能 够 带 给 用 户 丰 富 的 桌面 体验 ( 它 本 身 就 有 一 个 Ajax 类 ,用 于 实现 Ajax 
功能 ) 。 

目前 ,OpenLayers 能 够 支持 的 Format 有 XML, GML, GeoJSON, GeoRSS, JSON, 
KML,WFS,WKT(Well-Known Text)。 在 OPenlayers. Format 名 称 空间 下 的 各 个 类 里 ， 
实现 了 具体 读 / 写 这 些 Format 的 解析 器 o 

OpenLayers 能 够 利用 的 地 图 数据 资源 “丰富 多 彩 ”, 给 用 户 提供 较 多 的 选择 ,比如 
WMS, WFS,GoogleMap,KaMap,MSVirtualEarth, WorldWind 等 。 当 然 , 也 可 以 用 简单 的 
图 片 作为 源 。 

1. 搭建 OpenLayers 框架 

先 到 官方 网 站 http://www. openlayers. org 下 载 压缩 包 , 这 里 下 载 Openlayers2. 1. 2。 
解压 后 可 以 看 到 其 中 的 一 些 目录 和 文件 ,复制 目录 下 的 OpenLayer. js、 根 目录 下 的 lib A 
录 、 根 目录 下 的 img 目录 到 网 站 的 Scripts 目录 下 (要 保证 OpenLayers.js,/lib,/img 在 同一 
目录 中 即 可 )。 然 后 ,创建 一 个 index. html 作为 查看 地 图 的 页 面 , 导 入 OpenLayers. js 和 将 
要 创建 的 js。 

加 载 WMS 和 GML 文件 为 例 ,代码 如 下 : 


< script src = "../lib/OpenLayers. js"></script > 
< script type = "text/javascript"> 
var lon 7 5; 
var lat = 40; 
var zoom = 5; 
var map, layer; 
// 声 明 变量 map.layer; 等 同 于 var map = null; var layer = null; 
map = new OpenLayers. Map( 'map') ; 
// 实 例 化 一 个 地 图 类 OpenLayers. Map 
layer = new OpenLayers.Layer. WMS( "OpenLayers WMS", 
"http://labs. metacarta. com/wms/vmap0", (layers: 'basic'] ); 
// 以 WMS 的 格式 实例 化 图 层 类 OpenLayers. Layer 
map. addLayer(layer) ; 
map. zoomToExtent (new OpenLayers. Bounds( — 3. 922119, 44. 335327, 
4.866943, 49. 553833) ); 
// 在 Map 对象 上 加 载 Layer 对 象 ,并 用 map. zoomToExtent 函数 使 地 图 合适 地 显示 , 主要 就 是 实现 


210 «|| WebGIS 工 程 项 目 开 发 实践 


图 片 的 范围 。 使 加 载 的 图 片 可 以 显示 全 部 需要 显示 的 地 图 信息 不 丢失 
map. addLayer(new OpenLayers. Layer. GML("GML", "gnl/polygon.xml")); 
// 在 刚 加 载 的 WMS 文件 基础 上 ,再 加 载 GL 文件 

剩 下 的 工作 就 是 ,加 上 一 些 控件 OpenLayers. Control 之 类 的 东西 ,比如 LayerSwitcher 
等 。 它 们 会 在 地 图 浏览 的 “窗口 ?上 增加 一 些 工 具 栏 或 是 “按钮 ”, 增 加 互动 性 和 功能 性 。 

2. 应 用 一 个 实例 

在 快速 搭建 完 环 境 之 后 ,结合 GeoServer 地 图 服务 器 ,发 布 一 张 地 图 。OpenLayers 提 
供 很 多 丰富 的 实例 供 开 发 者 修改 应 用 。 由 于 OpenLayers 是 一 款 免 费 的 地 图 浏览 器 客户 
端 ,读者 也 可 以 加 入 OpenLayers 的 Github 开发 团队 ,贡献 自己 的 代码 。 实 例 网 址 : 
http://openlayers. org/dev/examples/。 

OpenLayersAPI 服务 涉及 两 个 重要 的 基本 概念 Map 地 图 和 Layer 图 层 。 一 个 
OpenLayers 地 图 保存 了 包括 默认 投影 系统 .空间 范围 .度量 单位 .关于 默认 的 投影 、 范 围 单 
位 等 在 地 图 上 的 存储 信息 。 在 地 图 里 面 ,数据 通过 图 层 显 示 。 

1) 下 载 OpenLayers 

OpenLayers 可 以 在 http://www. openlayers. org/download/OpenLayers-2. 12. zip 处 
下 载 。 解 压 后 放 到 tomcat 的 webapps 目录 下 ,新 建文 件 夹 “OpenLayers- 第 一 个 程序 ” 
OpenLayers 的 目录 结构 如 图 6. 4-2 所 示 。 


WD apidoc config 2014/7/31109 — xb 
di ar 2014/7/3 11:09 文件 夫 
D build 2014/7/3 11:09 文件 夫 
lli doc 2014/7/31109 HE 
W doc config 2014/7/3 11:10 eee 
DB examples 2014/7/3 11:10 Jep% 
D img 2014/7/3 11:10 Xip 
ai 2014/7/3 11:10 ABE 
Di licenses 2014/7/3 11:10 [BE 
lli notes 2014/7/3 11:10 xit 
li tests 2014/7/3 11:10 — xk 
D theme 2014/7/3 11:10 Xi% 
dli tools 2014/7/3 11:10 eE = 
| LD gitignore 2012/6/28 4:56 ^ GITIGNORE 文件 
目 authors.ba. 2012/6/28 56 ”文本 文档 
E fcense.bd 2012/6/28 456 文本 文档 
Opentayers.debugjs 2012/7/3 14:52 后 文件 
Opentayersjs 2012/7/3 14:51 后 文件 
Opentayers.lightdebugjs 2012/7/3 14:52 后 文件 
国 OpenLayers.lightjs 2012/7/3 14:52 JS 
OpenLayers.mobile.debugjs 2012/7/3 14:52 — JS 文件 
Openlayers.mobilejs 2012/7/31452 — IS xt 


图 6.4-2 OpenLayers 的 目录 结构 


2) 构造 HTML 文件 
构建 OpenLayers 视窗 需要 构造 一 个 HTML 文件 ,将 地 图 视窗 放 入 HTML 网 页 文件 
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H, OpenLayers 3: $E — A H E iic A FE 3 HEIL OC N ROAR AE AT EE — 47 Jb E 
入 所 有 的 HTML 元 素 在 网 页 上 。 创 建 index. html 文件 ,并 存储 在 tomcat 下 的 
OpenLayers 目录 下 ,除了 单 块 级 元 素 , 它 也 需要 包含 OpenLayers 库 页 面 的 脚本 标记 。 


<html> 
<head> 
<title>OpenLayers 第 一 个 程序 </title> 
</head> 
<body> 
<div id= "map" class = "smallmap"></div> 
</body> 
</html> 


3) 添加 OpenLayers 库 的 js 引用 
< script src =". /OpenLayers - 2. 12/1ib/OpenLayers. js"></script > 
4) 添加 OpenLayers 的 css 引用 


< link rel- "stylesheet" href - ". /OpenLayers - 2. 12/thene/default/style. css" 
type = "text/css" /> 
< link rel = "stylesheet" href = ". /OpenLayers - 2. 12/css/style.css" type = "text/css" /> 


5) 创建 地 图 对 象 

为 了 创建 一 个 地 图 对 象 ,首先 必须 创建 一 个 地 图 。 该 OpenLayers. Map 构造 函数 需要 
一 个 参数 : 这 个 参数 必须 是 一 个 HTML 元 素 , 或 者 是 一 个 HTML 元 素 的 ID ,这 个 元 素 将 
决定 地 图 放置 的 具体 位 置 。 

地 图 构造 函数 : 


var map = new OpenLayers. Map("map"); 


下 一 步 要 创建 一 个 视窗 ,添加 一 个 层 到 地 图 。OpenLayers 支持 多 种 不 同 的 数据 源 ,从 
WMS 到 Yahoo! MapstoWorldWind。 在 这 个 例子 中 ,所 使 用 的 WMS 层 调 用 前 面 由 
GeoServer 发 布 的 地 图 。 

构造 层 代码 : 


< script type = "text/javascript"> 
// 定 义 OpenLayersmap 对 象 
var map = null; 
// 定 义 wmsurl 地 址 
var wms_url = "http://127.0.0.1:8081/geoserver/world/wms?"; 
// 定 义 wms 图 层 
var wms_layer = "world:10m admin 0 countries"; 
// 定 义 wnsnap 图 片 格式 
var wms_format = 'image/png'; 
function init() 
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// 创 建 nap 对 象 ， 
map = new OpenLayers. Map( "map" ) ; 
// 创 建 WMSlayer WA 
var layer = new OpenLayers. Layer. WMS( 
"OpenLayers WMS", 
wms url, 
t 
layers: wms layer, 
format: wns format, 
singleTile: true 
n; 
// 添加 图 层 
map. addLayer(layer) ; 
// 放大 到 全 屏 
map. zoomToMaxExtent() ; 
} 


</script> 

此 构造 函数 的 第 一 个 参数 是 层 的 名 字 , 主 要 目的 用 于 显示 ; 第 二 个 参数 是 WMS 服务 
器 的 URL; 第 三 个 参数 是 包含 要 追加 到 WMS 请 求 参数 的 对 象 。 

最 后 ,为 了 显示 地 图 ,必须 设置 一 个 中 心 和 缩放 级 别 。 为 了 缩放 地 图 以 适合 窗口 ,可 以 
使 用 函数 zoomToMaxExtent, 它 能 够 随意 放大 至 窗口 大 小 。 

6) 设置 htmlonload 函数 为 init() 


€ body onload= "init()"> 


</body> 
7) 定义 Openlayers 的 map 容器 


<body onload= "init()"> 
<div id= "nap" class = "smallmap"></div> 
</body> 


8) 代码 整合 
下 面 将 所 有 代码 整合 起 来 ,创建 一 个 OpenLayers 视窗 : 


<! DOCTYPEHTMLPUBLIC " — //W3C//DTD HTML4. OTransitional//EN"> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = utf - 8"> 
« title» OpenLayers 第 一 个 程序 </title> 
«link rel = "stylesheet" href - ". /OpenLayers - 2. 12/thene/default/style.css" 
type- "text/css" /» 
«link rel = "stylesheet" href =". /OpenLayers - 2. 12/css/style.css" type="text/css" /> 


< script src=". /OpenLayers - 2. 12/1ib/Openlayers. js"></script > 


< script type = "text/javascript"> 
//% X. OpenLayersmap 对 象 
var map = null; 


// 定 义 wmsurl 地 址 


var wms_url = "http://127.0.0.1:8081/geoserver/world/wns?" ; 


//% X. wms 图 层 
var wns layer = "world:10m admin 0 countries"; 
// 定 义 wmsmap 图 片 格式 
var wms_format = 'image/png'; 
function init() 
t 
// 创 建 nap 对象， 
map = new OpenLayers. Map("map") ; 
// 创 建 WMSlayer 对 象 
var layer = new OpenLayers. Layer.WMS( 
"OpenLayers WMS", 


wms_url, 


layers: wms_layer, 
format: wms format, 
singleTile: true 
D 
// 添加 图 层 
map. addLayer( layer); 
// 放大 到 全 屏 
map. zoonToMaxExtent() ; 
} 
</script> 
</head> 
< body onload = "init()"> 
<div id= "map" class = "smallmap"></div> 
</body> 
</html> 
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9) 在 浏览 器 中 输入 http://localhost: 8080/OpenLayers/index. html. 显示 OpenLayer 


界面 , 即 之 前 在 地 图 服务 器 GeoServer 发 布 的 地 图 ,如 图 6. 4-3 所 示 。 


10) 添加 一 个 到 加 的 WMS 


WMS 图 层 具 有 相同 的 投影 闪 加 到 其 他 WMS 层 之 上 的 能 力 。 使 用 WMS 做 到 这 一 点 
的 最 好 办 法 是 将 transparent 参数 设置 为 true。 这 里 的 例子 演示 了 如 何 将 一 个 透明 的 WMS 


覆盖 添加 到 地 图 : 
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[SEE 
© > © A [C localhost&080/OpenLayers/index html EIE 


8 


图 6.4-3 OpenLayer 界面 


var twms = new OpenLayers. Layer. WMS( "WorldMap", 

"http: //world. freemap. in/cgi - bin/mapserv?", 

{ map: '/www/freemap. in/world/map/factbooktrans. map', 

transparent: 'true', layers: 'factbook') 

) 
map. addLayer(twns); 
1D 添加 矢量 标记 到 地 图 
要 在 确定 地 图 的 经 度 和 纬度 中 添加 一 个 标记 ,可 以 使 用 一 个 矢量 图 层 添 加 一 个 释 加 层 。 
var vectorLayer = new OpenLayers. Layer. Vector("Overlay"); 
var feature 7 new OpenLayers. Feature. Vector( 

new OpenLayers. Geonetry.Point( - 61, 42), 

(sone: 'data'}, 

[externalGraphic: 'img/marker.png', graphicHeight: 21, graphicWidth : 16] 
E 
vectorLayer.addFeatures(feature); 
map. addLayer(vectorLayer); 


6.4.2 源 代 码 总 体 结构 分 析 


通过 前 面 的 项 目 介绍 ,读者 已 经 知道 OpenLayers 是 什么 ,能 够 做 什么 。 接 下 来 我 们 将 
分 析 它 怎么 样 、 以 及 怎样 实现 的 问题 ,如 图 6. 4-4 所 示 。 

从 图 6. 4-4 可 以 初步 认识 一 下 OpenLayers 的 类 (文档 中 的 类 按 字 母 顺序 排列 )。 在 类 
的 顶层 是 OpenLayers, 它 为 整个 项 目 实现 提供 名 称 空间 (JavaScript 语言 没有 名 称 空间 ,但 
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OpenLayers OpenLayers 
JavaScript Maj Library 
= ~ The OpenLayers object provides a namespace for all things OpenLayers 
OpenLayers 
OpenLayers Summary 
peer he bj id 
OpenLayers The OpenLayers object provides a ni 
Feature Functions 
Filter — getScriptLocation Return the path to this script. 
Format Properties 
CREE ImgPath {String} Set this to the path wher 
peu A slash. 
img VERSION_NUMBER This constant identifies the version 
Layer 
Marker 
Popup 
Protocol "T 
Rasderor Functions 
Request 
Strategy " " 
Symbolizer _getScriptLocation 
Tile Return the path to this script. This is also implemented in OpenLayers/SingleFile.js 
Deprecated 
Opentayers Returns 
Index {String} Path to this script 
Search 
Properties 


图 6. 4-4 OpenLayers 源 代 码 总 体 结构 


是 它 确实 有 自己 的 机 制 实现 类 似 的 功能 ,后 面 会 说 明 ), 它 直接 拥有 常量 VERSION _ 
NUMBER, ,以 标识 版 本 。 

1. BaseTypes 

BaseTypes( 基 本 类 型 ) : OpenLayers 构建 的 “自己 ”的 类 。 它 们 分 别 是 OpenLayers. 
Bounds, OpenLayers. Class, OpenLayers. Element, OpenLayers.LonLat, OpenLayers. Pixel, 
OpenLayers.Size. 

1) OpenLayers. Bounds 

在 这 个 类 中 ,数据 以 四 个 浮 点 型 数 left\bottom , right, top 的 格式 存储 , 它 是 一 个 像 盒子 
一 样 的 范围 。 它 实现 了 描述 一 个 Bound 的 函数 : toString, toArray 和 toBBOX。 其 中 ， 
toString 的 代码 如 下 : 

toString :function () { 

return ( "left - bottom - (" + this.left + "," + this.bottom + ")" 
+ "right-top-(" + this.right + "," + this.top + ")"); 

) 

结果 类 似 于 "left-bottom 二 (5,42) right-top— (10.45)". 

三 个 Bound 数据 来 源 函 数 为 fromString、fromArray 和 fromSize; 五 个 获取 对 象 属 
性 的 函数: getWidth、 getheight、 getSize、 getCenterPixel, getCenterLonLat。 其 余 还 有 : 
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add:function (x, y), extend: function (object), containsLonLat, containsPixel, contains, 
intersectsBounds. containsBounds.determineQuadrant . wrapDateLine, 

2) OpenLayers. Class 

这 个 类 是 OpenLayers 中 的 “大 红 人 ”, 只 要 创建 其 他 类 就 得 用 它 ,同时 也 实现 了 多 重 继 
承 。 用 法 如 下 : 

单 继承 创建 : class = OpenLayers. Class(prototype)。 

多 继承 创建 : class = OpenLayers. Class(Classl, Class2. prototype). 

3) OpenLayers. Element 

在 这 个 名 称 空间 下 ,开发 者 写 了 好 多 API, 有 visible、toggle、hide、show、remove、getheight、 
getd imensions 和 getStyle, 以 实现 元 素 的 显示 、 隐 藏 .删除 .取得 高 度 ,取得 范围 等 功能 。 以 
getheight 函数 为 例 看 看 它 的 代码 : 

getheight: function (element) { 

element = OpenLayers. Util. getElement(element) ; 
return element. offsetheight; 

} 

这 里 涉及 文档 对 象 模型 DOM 的 一 些 东 西 ,函数 本 身 很 简单 ,最 后 返回 元 素 的 高 度 。 

4) OpenLayers. LonLat 

这 是 经 纬度 类 ,其 实例 为 地 图 提供 一 经 度 、 纬 度 对 ,即位 置 。 有 两 个 属性 lon (x-axis 
coodinate) 和 lat( y-axis coordinate)。 这 里 说 明 一 下 ,经 纬度 如 何 与 x li^ pg cy 轴 坐 标 联系 
在 一 起 : 当地 图 是 在 地 理 坐 标 投影 下 , 它 就 是 经 纬度 ; 不 然 就 是 地 图 上 的 x/y 轴 坐 标 。 除 
构造 函数 外 ,实现 了 五 个 函数 : 

(1) toShortString :function O ; 把 坐标 转换 为 字符 串 。 

(2) clone:function (): 复制 一 个 LonLat 对 象 。 

(3) Add:function (lon, lat); 改变 现 有 地 图 的 位 置 。 


return new OpenLayers.LonLat(this.lon + lon, this.lat + lat); 


(4) equals; function (ID); 判断 传人 的 lon, lat 对 是 否 与 当前 的 相等 。 

(5) wrapDateLine:function (maxExtent): 复制 (lon,lat) ,指定 为 边界 的 最 大 范围 。 

5) OpenLayers. Pixel 

这 是 像素 类 ,在 显示 器 上 以 (x,y) 坐 标的 形式 呈现 像素 位 置 。 有 x 坐标 、y 坐标 两 个 属 
性 ,提供 四 个 成 员 函 数 : 

(D clone:function ©: 复制 像素 。 

(2) equals:function (px): 判断 两 像素 是 否 相 等 。 

(3) add:function (x.y): 改变 (x,y) 使 其 成 为 新 像素 。 


return new OpenLayers. Pixel(this.x + x, this.y + y); 
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(4) offset: function (px): 调用 add() 使 像素 位 置 发 生 偏 移 。 
newPx = this.add(px.x, px.y); 


6) OpenLayers. Size 

它 也 有 两 个 属性 : 宽度 width, fS BÉ height。 实 现 了 两 个 成 员 函 数 : clone: function O 
和 equals:function (sz) 。 

2. Control 

Control 是 通常 所 说 的 控件 类 , 提供 各 种 各 样 的 控件 ,比如 上 节 中 的 图 层 开关 
LayerSwitcher ,编辑 工具 条 EditingToolbar 等 。 加 载 控 件 的 例子 : 

class = new OpenLayers. Map( 'map', { controls: [] }); 


map. addControl(new OpenLayers. Control.PanZoonBar()); 
map. addControl(new OpenLayers. Control.MouseToolbar()); 


(1) Button; 按钮 ,方法 trigger() 单 击 按钮 的 时 候 会 调用 。 

使 用 方法 如 下 : 

var button = new OpenLayers. Control.Button({ 

displayClass: "MyButton", trigger: myFunction 

n; 

panel. addControls([button]); 

(2) DragPan: 鼠标 拖 动 地 图 。 

(3) DrawFeature: 在 矢量 图 上 夯 点 、 线 、 面 。 

(4) EditingToolbar: 编辑 工具 条 ,EditingToolbar 包含 4 个 控件 ,分 别 是 drawpoint、 
drawlines、drawpolygon、pannavigation, 构 造 函 数 参 数 为 layer(Openlayer. Layer. Vector) , 


options, 


例如 : 


var vector = new OpenLayers. Layer. Vector("Editable Vectors"); 
map. addLayers( [ vector] ); 
map. addControl(new OpenLayers. Control. EditingToolbar(vector) ); 


Geolocate; 地 理 定位 ,把 w3cgeolocation API 包装 成 控件 ,与 地 图 绑 定 ,位 置 发 生变 化 
时 触发 事件 。 

(5) Graticule: 格子 线 , 在 地 图 上 以 grid 显示 经 纬 线 。 

(6) KeyboardDefaults: 增加 了 用 键盘 实现 平移 缩放 功能 。 


map. addControl(new OpenLayers. Control. KeyboardDefaults()); 
(7) LayerSwitcher: 图 层 切 换 功 能 。 


map. addControl(new OpenLayers. Control. LayerSwitcher( )); 
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(8) Measure: 用 于 测量 绘图 ,方法 getArea 和 getLength。 
(9) MousePosition: 鼠标 位 置 , 显 示 鼠 标 指针 移动 时 的 地 理 坐 标 。 


map. addControl(new OpenLayers. Control. MousePosition( )); 
(10) MouseToolbar: 鼠标 工具 栏 ,有 拉 框 放大 的 功能 ,但 是 需要 按 住 Shift 键 , 所 以 不 


推荐 使 用 ,要 实现 相同 的 功能 可 以 使 用 NavToolbar。 
(11) Navigation: 导航 ,导航 控件 处 理 鼠 标 事件 ( 拖 动 ,双击 滚动 ) 的 地 图 浏览 。 


注意 这 个 控件 是 默认 添加 到 地 图 中 的 NavToolbar; 加 入 了 两 个 mousedefaults 控件 , 通 
过 使 用 zoomBox 实现 拉 框 放大 功能 。 


map. addControl(new OpenLayers. Control. NavToolbar( ) ); 


(12) OverviewMap UE HR): 默认 在 地 图 的 右 下 角 map. addControl(new OpenLayers. 
Control. OverviewMap() ) 。 

(13) Pan; 平移 。 

(14) Panel; 面板 ,Panel 控件 是 其 他 控件 的 容器 。 

Eachcontrolinthepanelisrepresentedbyanicon, 即 表示 添加 到 面板 里 面 的 控件 都 是 用 图 
GRAIN 

(15) PanZoom: 平移 缩放 ,由 OpenLayers. Control. PanPanel 和 OpenLayers. Control. 
PanPanel 这 两 个 控件 组 成 ,具有 平移 和 缩放 的 功能 。 


map. addControl(new OpenLayers. Control. PanZoom( ) ) ; 


(16) PanZoomBar: 平移 缩放 工具 栏 ,由 OpenLayers. Control. PanPanel 和 OpenLayers. 
Control, ZoomBar 这 两 个 控件 组 成 ,具有 平移 和 缩放 功能 ,此 控件 和 PanZoom 的 区 别 见 
图 标 。 


map. addControl(new OpenLayers. Control.PanZoonBar()); 

(17) Permalink: 永久 链接 , 单 击 永 久 链接 将 用 户 返回 到 当前 地 图 视图 。 例 如 : 
map. addControl(new OpenLayers. Control.Permalink()); 

(18) Scale; 比例 尺 , 以 1: 1 的 比率 样式 显示 当前 地 图 的 比例 。 例 如 : 

map. addControl(new OpenLayers. Control.Scale()); 

(19) ScaleLine: 比例 尺 , 以 线段 指标 的 样式 显示 当前 地 图 的 比例 。 例 如 : 

map. addControl(new OpenLayers. Control. ScaleLine( ) ) ; 


(20) SelectFeature: 通过 单 击 或 是 悬 停 选择 给 定 层 上 的 Feature. ik PR ICA EXC layer 


COpenlayers. Layer. Vector) .options 。 
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(21) multiple: 是 否 人 允许 同时 选择 多 个 图 形 。 

(22) clickout: 取消 功能 , 当 单 击 图 形 外 的 任何 东西 ,取消 对 图 形 的 选择 。 
(23) hover: 鼠标 悬 停 。 

例如 : 

selectControl = new OpenLayers. Control. SelectFeature( 


[vectorsl, vectors2], 
i clickout: true, toggle: false, 
multiple: false, hover: false, 
toggleKey: "ctrlKey", 
multipleKey: "shiftKey" 
); | 
map. addControl(selectControl); 
selectControl.activate(); 
(24) Snapping: 编辑 矢量 图 层 时 用 于 捕捉 。 
(25) TouchNavigation: 触摸 导航 ,只 针对 触摸 功能 的 设备 的 地 图 绘制 应 用 程序 。 
(26) WMSGetFeatureInfo: 使 用 WMS 的 查询 来 获取 地 图 上 一 个 点 的 信息 ,显示 的 格 
式 是 Format, 
(27) WMTSGetFeatureInfo: 使 用 WMTS 的 查询 来 获取 地 图 上 一 个 点 的 信息 ,显示 的 
格式 是 Format。 
(28) ZoomBox: 拉 框 放大 的 功能 ,与 NavToolbar 同样 ,属性 out 可 以 实现 拉 框 缩小 
(这 个 控件 没有 实现 ) 。 
3. Feature 
Feature 是 geography 和 attributes 的 集合 。 在 OpenLayers 中 ,OpenLayers. Feature 
类 由 一 个 Marker 和 一 个 lonlat 组 成 ,如 图 6. 4-5 所 示 。 
OpenLayers. Feature. WFS 与 OpenLayers. Feature. 
Vector 继承 于 它 。 
4. Filter 
此 类 表示 OGC 过 滤器 。 Maree Lona | 
5. Format 图 6.4-5 Feature 集合 图 
此 类 用 于 读 / 写 各 种 格式 的 数据 , 它 的 子 类 都 分 别 创 
建 了 各 个 格式 的 解析 器 。 这 些 格式 有 : XML, GML, GeoJSON, GeoRSS, JSON, KML, 
WFS.WKT(Well-Known Text). 
6. Geometry 
几何 参数 ,是 对 地 理 对 象 的 描述 。 它 的 子 类 有 Collection, Curve, LinearRing, LineString, 
MultiLineString, MultiPoint, MultiPolygon, Point, Polygon, Rectangle, Surface. 下 是 这 些 
类 的 实例 ,构成 了 地 图 。 需 要 说 明 的 是 ,Surface 类 暂时 还 没有 实现 。 
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7. Handler 

这 个 类 用 于 处 理 序列 事件 ,可 被 激活 和 取消 。 同 时 , 它 也 有 命名 类 似 于 浏览 器 事件 的 方 
法 。 当 一 个 handler 被 激活 ,处 理事 件 的 方法 就 会 被 注册 到 监听 器 listener, 以 响应 相应 的 
事件 ; 当 一 个 handler 被 取消 ,这 些 方法 在 事件 监听 器 中 也 会 相应 地 被 取消 注册 。Handler 
通过 控件 control 创建 ,而 control 通过 icon 表现 。 


8. Lang 
Lang 是 国际 化 命名 空间 ,包含 各 种 语言 和 方法 来 设置 和 获取 当前 的 语言 词典 。 
9. Icon 


Icon 在 计算 机 屏幕 上 以 图 标的 形式 呈现 ,有 url, size 和 position 三 个 属性 。 一 般 情况 
下 , 它 与 OpenLayers. Marker 结合 应 用 ,表现 为 一 个 Marker。 

10. Layer 

Layer 即 图 层 。 

11. Map 

Map 是 网 页 中 动态 地 图 。 它 就 像 容 器 ,可 向 里 面 添加 图 层 Layer 和 控件 Control。 实 际 
上 ,单个 Map 是 毫 无 意义 的 , 正 是 Layer 和 Control 成 就 了 它 。 

12. Marker 

它 的 实例 是 OpenLayers. LonLat 和 OpenLayers. Icon 的 集合 。 通 俗 地 说 ,Icon 附 上 一 
定 的 经 纬度 就 是 Marker。 

Marker 包括 一 个 OpenLayers. LonLat 和 OpenLayers, Icon, PEX ,标记 一 般 都 是 添加 
到 一 个 特殊 的 图 层 , 即 OpenLayers. Layer. Markers。 

使 用 方法 一 : 


var markers = new OpenLayers. Layer. Markers( "Markers" ); 

map. addLayer(markers); 

var size 7 new OpenLayers.Size(21,25); 

var offset = new OpenLayers. Pixel( - (size.w/2), - size. h); 

var icon = new OpenLayers. Icon ( ' http://www. openlayers. org/dev/img/marker. png ' ， size, 
offset); 

markers. addMarker(new OpenLayers. Marker(new OpenLayers. LonLat(0,0), icon)); 

markers. addMarker(new OpenLayers. Marker(new OpenLayers. LonLat(0, 0), icon. clone())); 


使 用 方法 二 : 


var markers = new OpenLayers.Layer.Markers( "Markers" ); 
map. addLayer(markers); 
markers. addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0), 
new OpenLayers. Icon( ‘http://www. openlayers. org/dev/ing/marker.png')) 
E 


注意 ”标记 不 能 使 用 同样 的 图 标 ,但 是 可 以 使 用 clone() 方 法 实现 对 图 标的 克隆 。 
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Box 用 和 矩形 做 标记 ,同样 要 添加 到 Boxes 


OpenLayers.Layer.Markers 
这 个 图 层 里 面 ,它们 的 组 合 关系 如 图 6. 4-6 i 
DES 
13. Popup OpenLayers.LonLat OpenLayers.lcon 
RI a Be “mgn 
能 上 个 小 巧 的 层 ,实现 地 图 * 开 关 ” 功 图 6.4-6 OpenLayers. Layer. Markers 


组 合 关系 
Class = new OpenLayers. Popup( "chicken", 

new OpenLayers. LonLat(5,40), 

new OpenLayers. Size(200, 200), "example popup", true 
m addPopup( popup) ; 

14. Protocal 

抽象 的 矢量 层 协议 类 ,为 了 不 被 直接 实例 化 ,使 用 的 协议 子 类 的 一 个 替代 。 

15. Renderer 

WY, TE OpenLayers 中 ,这 染 功能 是 作为 矢量 图 层 的 一 个 属性 存在 的 , 称 为 泻 染 
器 ,矢量 图 层 就 是 通过 这 个 泻 染 器 提供 的 方法 将 矢量 数据 显示 出 来 。 以 SVG 和 VML 为 
15] ,继承 关系 如 图 6. 4-7 所 示 。 


OpenLayers.Renderer 


i 
OpenLayers.Renderer.Elements 
i 
I 
OpenLayers.Renderer.S VG OpenLayers.Renderer. VML 


图 6.4-7  OpenLayersRenderer 集合 继承 关系 


16. Symbolizer 

1) Line 用 来 泻 染 线 

属性 : 

strokeColor: 线条 的 颜色 。 

strokeOpacity: 线条 的 不 透明 度 。 
strokeWith ; 宽度 。 

strokeLinecap: 类 型 (*butt”, “round”. or“square”). 
strokeDahstyle: 根据 SLD 规范 的 虚线 样式 。 
2) Point 用 来 浑 染 点 

属性 : 

strokeColor: 线条 的 颜色 。 
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strokeOpacity: 线条 的 不 透明 度 。 

strokeWith : 宽度 。 

strokeLinecap: 类 型 (“butt”, " round" ,or“square”) 。 

strokeDahstyle: 根据 SLD 规范 的 虚线 样式 。 

fillColor: RGB 十 六 进 制 填充 颜色 。 

fillOpacity: 填充 不 透明 度 。 

pointRadius: 一 个 像素 点 的 半径 。 

3) Polygon 用 来 演 染 平面 

属性 : 

strokeColor: 线条 的 颜色 。 

strokeOpacity: 线条 的 不 透明 度 。 

strokeWith : 宽度 。 

strokeLinecap: 444 (“butt”, “round”. or*square”). 

strokeDahstyle; 根据 SLD 规范 的 虚线 样式 。 

fillColor: RGB 十 六 进 制 填充 颜色 。 

fillOpacity: 填充 不 透明 度 。 

4) Text 用 来 演 染 文字 

属性 : 

label: 标签 的 文本 。 

fontFamily: 标签 的 字体 家 族 。 

fontSize: 字体 大 小 。 

fontWeight: 字体 粗细 。 

fontStle: 字体 样式 。 

17. Tile 

Tile 用 于 设计 一 个 单一 的 瓦 片 ,或 者 更 小 的 分 辩 率 ,Tile 存储 自己 的 相关 信息 。 

SingleTile 进入 单 瓦 模式 层 ,意味 着 一 个 瓦 片 将 被 载 人 , 即 载 和 的 多 张 瓦 片 会 被 合成 一 
个 瓦 片 载 入 ,Tile 的 size 取决 于 ratio 属性 ,size 王 ratio* map. size. 

Ratio 单 瓦 大 小 与 整个 地 图 大 小 的 比例 ,ratio 属性 只 在 singleTile 模式 下 使 用 Tile 存 
储 它们 自身 的 信息 ,比如 url 和 size 等 。 它 的 类 继承 关系 如 图 6. 4-8 所 示 。 


OpenLayers.Tile 
OpenLayers.Tile. WFS OpenLayers.Tile.Image 


6.4-8 OpenLayers 瓦 片 集合 类 继承 关系 
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6.4.3 Web 制图 基本 知识 


OpenLayers 的 主要 概念 是 地 图 , 它 是 信息 泻 染 的 具体 表现 。 地 图 可 以 包含 任意 数量 的 
层 , 它 可 以 是 栅 格 层 或 者 矢量 层 。 在 这 种 情况 下 ,每 一 层 都 有 一 个 数据 源 提 供 特定 的 数据 ， 
包括 PNG 格式 图 像 KML 格式 文件 等 。 此 外 ,在 地 图 上 可 以 包含 控件 ,这 有 助 于 与 地 图 内 
容 之 间 的 交互 ,包括 平移 .缩放 ,特征 选择 等 。 

1. 理解 基础 层 和 非 基础 层 

当 你 在 应 用 OpenLayers 构建 Web 地 图 时 ,需要 明确 的 第 一 件 事 情 是 基础 层 。 

baseLayer( 基 础 层 ) 是 一 种 特殊 的 层 , 这 一 图 层 始 终 是 可 见 的 ,并 确定 了 一 些 地 图 属性 ， 
如 投影 和 缩放 级 别 。 

一 个 地 图 可 以 有 一 个 以 上 的 基础 层 , 但 是 在 同一 时 间 它 们 中 只 有 一 个 可 以 处 于 活动 状 
态 。 此 外 ,如 果 你 添加 多 个 标记 基础 层 到 地 图 ,添加 的 第 一 个 基础 层 将 作为 地 图 的 活动 状态 
基础 层 。 

下 面 这 个 实例 将 展示 如 何 将 图 层 添 加 到 地 图 中 ,并 且 标 记 它 们 是 基础 层 。 要 建立 具有 
两 个 并 排 显示 的 地 图 ,每 一 个 地 图 页 面 有 一 个 层 切换 控制 ,可 以 控制 地 图 图 层 , 如 图 6. 4-9 
Bra 。 


[E EU D localhost 8080/0penLayers/book/7/7 /chO1 base non. base hmi. aa 


lap with one non base Layer: ap with two base layers 


图 6. 4-9 基础 层 和 非 基础 层 


假设 已 经 创建 了 一 个 index. html 文件 ,并且 已 经 包含 了 OpenLayers 库 。 
修改 添加 层 的 步骤 如 下 : 
CD 首先 创建 必要 的 HTML 代码 ,同时 包含 了 创建 好 的 地 图 。 
<table style= "width : 100 % ; height: 95%;"> 
<tr> 
<td> 
< p» Map with one nonbaselayer:</p> 
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<div id= "ch01 base nonbase map a" style="width : 100%; 
height: 500px;"></div> 
</td> 
<td> 
<p> Map with two baselayers </p> 
<div id= "ch01 base nonbase map b" style="width : 100% ; 
height: 500px;"></div> 
</td> 
</tr> 
</table> 


(2) 在 此 之 后 ,添加 一 个 script 263€ (<script type="text/javascript" >< /script>) 
提供 必要 的 代码 来 初始 化 每 一 个 地 图 。 在 地 图 左 侧 栏 包含 两 个 图 层 , 一 个 基础 层 和 一 个 非 
基础 层 。 


// 初 始 化 左 侧 地 图 
// 应 用 特定 DOM 元 素 创建 地 图 
var map a = new OpenLayers.Map("base nonbase map a"); 
// 添 加 WMS 层 
var wms = new OpenLayers. Layer. WMS("OpenLayersWMSBasic", 
"http: //vmap0. tiles. osgeo. org/wms/vmap0", 
{ 
layers: 'basic' 
Lh 
{ 
isBaseLayer: true 
Di 
map_a. addLayer(wms) ; 
// 添加 WMS 层 
var topo = new OpenLayers. Layer. WMS("USATopoMaps" , 
"http: //terraservice. net/ogcmap. ashx" , 
{ 
layers: "DRG" 
}, 
{ 
opacity: 0.5, 
isBaseLayer: false 
DE 
map a. addLayer(topo); 
// 添 加 层 选 择 控件 
map a. addControl(new OpenLayers. Control.LayerSwitcher()); 
// 将 地 图 视图 范围 设置 为 全 图 视窗 
// 注 意 : 如 果 没 有 一 个 基础 层 ,将 创建 失败 
map a. setCenter(new OpenLayers.LonLat( — 100, 40), 5); 
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(3) 在 地 图 的 右边 包含 两 个 基础 层 : 


// 初 始 化 右 侧 地 图 
// 应 用 特定 DOM 元 素 创建 地 图 
var map b = new OpenLayers.Map("base nonbase map b"); 
// 添加 WMS 层 
var wms = new OpenLayers. Layer. WMS("OpenLayersWMSBasic", 
"http: //vmap0. tiles. osgeo. org/wms/vmap0", 
{ 
layers: 'basic' 

DE 
map b.addLayer(wns); 
// 添加 WMS 层 
var topo = new OpenLayers. Layer. WMS("USATopoMaps" , 

"http: //terraservice. net/ogcmap. ashx" , 

t 

layers: "DRG" 

D; 
map b.addLayer(topo); 
// 添 加 层 选择 控件 
map b.addControl(new OpenLayers. Control. LayerSwitcher( ) ); 
// 将 地 图 视图 范围 设置 为 全 图 视窗 
// 注 意 : 如 果 没 有 一 个 基础 层 , 将 创建 失败 
map b. setCenter(new OpenLayers.LonLat( - 100, 40), 5); 


(4) 看 到 左 侧 地 图 中 的 解释 。 做 的 第 一 件 事 是 创建 一 个 OpenLayers. Map 例子 , 它 将 
在 Div 元 素 中 准备 泻 染 , 左 侧 地 图 如 下 : 


varmap a = new OpenLayers.Map("base nonbase map a"); 


(5) 接 下 来 ,创建 两 个 图 层 , 并 将 其 添加 到 地 图 中 。 使 第 二 层 成 为 非 基 础 层 ,在 构造 函 
数 中 配置 指定 的 属性 : 


var topo = new OpenLayers. Layer. WMS( " USATopoMaps" , 
"http: //terraservice. net/ogcmap. ashx" , 
{ 
layers: "DRG" 
}, 
{ 
opacity: 0.5, 
isBaseLayer: false 


); 


(6) 在 OpenLayers 中 ,所 有 层 的 类 继承 OpenLayers. Layer 基础 类 。 此 类 定义 了 常见 
的 所 有 图 层 ,如 一 些 属性 opacity( 透 明度 ) 或 者 isBaseLayer( 是 否 为 基础 层 )。 
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2. 添加 地 图 选择 项 

在 创建 一 个 地 图 的 可 视 化 数据 时 ,有 时 需要 考虑 一 些 重要 的 事情 : 使 用 投影 、 缩 放 级 别 
的 选择 ,要 使 用 的 默认 的 平 铺 尺寸 层 的 请 求 等 。 

大 多 数 这 些 重 要 的 要 求 都 包含 在 所 谓 的 地 图 属性 中 ,如 果 你 选择 工作 在 allOverlays 模 


式 , 你 需要 把 它们 考虑 在 内 。 
这 个 实例 将 演示 如 何 设 定 一 些 最 常见 的 地 图 属性 。 
注意 ,创建 OpenLayers. Map 类 的 实例 可 以 有 三 种 方式 : 


CD 表示 地 图 将 呈现 的 DOM 元 素 的 标识 符 : 

varmap = new OpenLayers.Map("map id"); 

(2) 表示 DOM 元 素 的 标识 符 , 并 表示 一 组 选项 : 

varmap = new OpenLayers.Map("map id", (some options here}); 

G) 只 显示 一 组 选项 ,可 以 在 以 后 设置 DOM 元 素 的 地 方 呈 现 地 图 : 
varmap = new OpenLayers.Map((some options here]); 

具体 步骤 如 下 : 

CD 创建 一 个 DOM 元 素来 泻 染 地 图 。 


<! -一 地 图 DOM 元 素 --> 
<div id= "map options" style="width : 100% ; height: 95 & ;"></div> 


(2) 定义 一 些 地 图 选择 项 。 


Var options = 
{ 
div: "map options", 
projection: "EPSG:4326", 
units: "degrees", 
displayProjection: new OpenLayers. Projection("EPSG:900913"), 
numZoomLevels: 7 
}; 


(3) 通过 传递 选项 创建 的 地 图 。 

var map = new OpenLayers. Map(options) ; 

(4) 添加 MousePosition 控件 使 在 地 图 上 显示 鼠标 位 置 。 

var map = new OpenLayers. Map(options); 

(5) 添加 一 个 WMS 图 层 ,并 设置 一 些 需要 显示 地 图 视图 的 地 方 。 


var wms = new OpenLayers. Layer. WMS("OpenLayersWMSBasic", 
"http: //vmap0. tiles. osgeo. org/wms/vmap0", 
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t 
layers: 'basic' 
) 
); 
nap. addLayer (wns) ; 
map. setCenter(new OpenLayers. LonLat(0, 40), 4); 
在 这 个 例子 中 ,已 经 使 用 了 5 个 地 图 选择 项 来 初始 化 OpenLayers. Map 实例 。 
3. 管理 地 图 的 栈 层 
地 图 (Map) 是 OpenLayers 的 核心 概念 。 它 使 开发 者 能 够 从 不 同 的 可 视 化 信息 层 , 同 时 
带 来 管理 以 及 连接 到 这 些 层 的 方法 。 
如 何 使 用 控制 层 很 重要 ,因为 添加 、 删 除 或 重新 排序 层 是 几乎 每 一 个 网 站 地 图 应 用 都 需 
要 而 且 非 常常 见 的 操作 ,地 图 的 栈 层 如 图 6. 4-10 所 示 。 


Maximize the layer 


6.410 管理 地 图 的 栈 层 


该 应 用 程序 在 地 图 的 右 侧 显示 控制 面板 ,添加 按键 来 进行 图 层 的 控制 操作 。 
(1). 创建 一 个 index. htm 文件 ,添加 需要 的 代码 来 创建 应 用 程序 布局 。 这 里 将 其 放置 


在 一 个 表 中 ,在 左 侧 放置 地 图 。 


<table class = "tm"> 
<tr> 
<td class = "left"> 
<div id= "managing layers" style="width : 100% ; height: 500px;"></div> 
</td> 
<td class = "right"> 


(2) 在 右 侧 放 置 控件 。 


<td class = "left"> 

<div id= "managing layers" style="width : 100% ; height: 500px;"></div> 
</td> 
<td class = "right"> 
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<p> Maximize the layer switcher control to see the map 
layers and move it clicking the buttons:</p> 
<table class= "tb"> 
<tr> 
<td> Select layer:</td> 
<td> 
<select id= "layerSelection"> 
<option value = "JPL"> JPL</option> 
<option value = "WorldMap"> WorldMap </option > 
<option value = "Canada"> Canada </option > 
</select > 
</td> 
</tr> 
<tr> 
<td> Move to top:</td> 
<td>< button onClick = "topLayer()"» Top </button ></td> 
</tr> 
<tr> 
<td> Move up:</td> 
<td>< button onClick = "raiseLayer()">Up</button ></td> 
</tr> 
<tr> 
< td> Move down:</td> 
<td >< button onClick = "lowerLayer()"> Down </button ></td> 
</tr> 
<tr> 
<td> Move to bottom:</td> 
<td>< button onClick = "bottomLayer( )"> Bottom </button ></td> 
</tr> 
</table> 
</td> 


(3) 在 allOverlays 模式 下 创建 一 个 OpenLayers. Map 实例 。 


var map = new OpenLayers.Map("managing layers", 
{ 
allOverlays: true 


); 
(4) 添加 一 些 图 层 到 地 图 。 


var jpl = new OpenLayers. Layer. WMS("JPL", 
[ 
"http://t1. hypercube. telascience. org/tiles?", 
"http: //t2. hypercube. telascience. org/tiles?", 
"http://t3. hypercube. telascience. org/tiles?", 
"http: //t4. hypercube. telascience. org/tiles?" 
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layers: 'landsat7' 
) 
E 
var worldmap = new OpenLayers. Layer. WMS("WorldMap", 
"http://vmap0. tiles. osgeo. org/wms/vmap0", 
{ 
layers: 'basic', 
format: 'image/png' 
} 


opacity: 0.5 
} 
); 
var canada = new OpenLayers. Layer. WMS( "Canada", 
"http://www2. dmsolutions. ca/cgi - bin/mswms_gmap", 
{ 
layers: "bath ymetry, land_fn, park", 
transparent: "true", 
format: "image/png" 


opacity: 0.5 
} 
); 
map. addLayers([jpl, worldmap, canada] ); 


(5) 添加 一 个 图 层 切 换 控 制 (显示 层 ) 和 中 心地 图 视图 。 


// 添加 图 层 选择 控件 

map. addControl(new OpenLayers. Control.LayerSwitcher( (ascending: false])); 
// 将 地 图 放 入 合适 的 视窗 中 

map. setCenter(new OpenLayers.LonLat( — 100, 40), 4); 


(6) 添加 JavaScript 代码 ,当前 面 的 四 个 按钮 被 单 击 时 进行 响应 。 
// 按键 事件 


function raiseLayer() { 
var layerName = docunent.getElemnetById( layerSelection').get( value'); 
var layer = map.getLayersByNane(layerName)[0]; 
map.raiseLayer(layer, 1); 

) 

function lowerLayer() { 
var layerName = document. getElemnetById( 'layerSelection').get('value'); 
var layer = map.getLayersByName(layerName)[0]; 
map.raiseLayer(layer, - 1); 

) 

function topLayer() ( 
alert("1"); 
var layerName = document.getElemnetById( layerSelection').get('value'); 
var layer = map.getlayersByNane(layerName)[0]; 
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var lastIndex = map. getNumLayers() - 1; 
map. setLayerIndex(layer, lastIndex); 
} 
function bottomLayer() { 
var layerName = document. getElemnetByld('layerSelection').get( 'value'); 
var layer = map. getLayersByName(layerName) [0]; 
map. setLayerIndex(layer, 0); 
} 


4. 管理 地 图 控件 

OpenLayers 自 带 很 多 控件 与 地 图 进行 交互 ,包括 平移 .缩放 .展示 完整 地 图 、 编 辑 要 素 
等 。 以 同样 的 方式 作为 两 层 , OpenLayers. Map 类 具有 管理 控制 方法 附加 到 地 图 。 
OpenLayers 带 有 很 多 控件 ,只 需要 添加 简单 的 代码 ,就 可 以 在 OpenLayers 上 添加 控件 ,如 
图 6. 4-11 所 示 。 


Controls: | MousePosition | | PanPanel | | ZoomPanel -22.53296, 29.49554 


图 6.4-11 管理 地 图 控件 


OpenLayers 控件 位 于 OpenLayers. Control 命令 空间 下 ,下 面 介绍 一 些 常 用 的 控件 类 型 。 

1) 图 层 切换 (Switcher) 控 件 (LayerSwitcher) 

图 层 切 换 (Switcher) 控 件 用 于 切换 OpenLayersMap 上 的 图 层 。LayerSwither 的 类 为 
OpenLayers. Control. LayerSwitcher。 添 加 LayerSwitcher 的 代码 如 下 : 

map. addControl(new OpenLayers. Control.LayerSwitcher()); 

2) 鼠标 坐标 位 置 (MousePosition) 控 件 

用 于 显示 当前 鼠标 所 在 的 地 图 坐标 。 图 6. 4-12 右 下 角 和 矩形 框 处 为 当前 鼠标 所 在 位 移 
的 地 图 坐标 。 

CD 定义 显示 坐标 值 的 容器 : 使 用 鼠标 坐标 位 置 (MousePosition) 控 件 需 要 定义 显示 坐 
标 值 的 div 容器 ,MousePosition 控件 会 将 坐标 值 写 入 该 div 中 。 
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Scale = 1 : 111M -28. 12500, 56. 07422 


E 6. 4-12 定义 显示 坐标 值 


<div id = "location"» location </div> 
(2) 创建 MousePosition 控件 : 
map. addControl(new OpenLayers. Control. MousePosition({element: $ ('location')])); 


OpenLayers. Control. MousePosition 的 参数 即 为 前 面 定义 的 div 的 id 值 。 

3) 地 图 比 列 尺 (MapScale) 控 件 

用 于 显示 当前 地 图 的 比例 尺 。 图 6. 4-13 左下 角 和 矩形 框 处 为 当前 地 图 的 比例 尺 。 

CD 定义 显示 坐标 值 的 容器 : 使 用 MapScale 控件 需要 定义 显示 内 容 的 div 容器 ， 
MapScale 控件 值 会 写 入 到 该 div 中 。 

(2) 创建 MapScale 控件 : 


map. addControl(new OpenLayers. Control. Scale( $ ('scale'))); 


OpenLayers. Control. Scale 的 参数 即 为 前 面 定义 的 div 的 id 值 。 
4) 放大 缩小 条 (PanZoomBar) 控 件 
创建 代码 : 


map. addControl(new OpenLayers. Control. PanZoomBar( ) ); 


图 6. 4-14 左上 角 和 矩形 框 给 出 当前 地 图 放大 缩小 条 。 
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66. 44531， 20. 91797 


图 6. 4-13 MapScale 控件 


j. 98047 


图 6.4-14  PanZoomBar 控件 
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5) 地 图 比例 尺 线 (ScaleLine) 控 件 
添加 代码 : 


map. addControl(new OpenLayers. Control.ScaleLine()); 


效果 如 图 6. 4-15 左下 角 和 矩形 框 所 示 。 


22.14844, 15.99609 


图 6.4-15 ScaleLine 控件 


6) 应 眼 控件 (OverviewMap) 
map. addControl(new OpenLayers. Control. OverviewMap()) ; 
完整 代码 如 下 : 


<! DOCTYPEHTMLPUBLIC " — //W3C//DTD HTML4. OTransitional//EN"> 
<HTML> 
« HEAD» 
< TITLE > OpenLayer : MapControls «/TITLE > 
< link rel = "stylesheet" href = ". /OpenLayers - 2. 12/thene/default/style. css" 
type = "text/css" /> 
< script src =". /OpenLayers - 2. 12/1ib/OpenLayers. js"></script > 
< style type = "text/css"» 
# wrapper 
{ 
width : 500px; 
} 
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并 location 
{ 
float: right; 
} 
# scale 
{ 
float: left; 
} 
</style> 
< script type = "text/javascript"> 
var map = null; 
var wms_url = "http://localhost :8081/geoserver/wms?" ; 
var wms_layer = "world:10m_admin_0_countries"; 
var wms_format = 'image/png'; 
var wms_version = "1.3.0"; 
function init() 


{ 
// 创 建 nap 对 象 ， 
map = new OpenLayers. Map( "map" ) ; 
var layer = new OpenLayers. Layer. WMS("OpenLayersWMS", 
wms_url, 
{ 
layers : wms_layer, 
format : wms_format, 
singleTile: true 
Di 
// 添加 图 层 
map. addLayer ( layer); 
// 添加 LayerSwitcher 控件 
map. addControl( new OpenLayers. Control.LayerSwitcher() ); 
// 添加 MousePosition 控件 
map. addControl(new OpenLayers.Control.MousePosition 
({element: $ ("location')])); 
// 添加 MapScale 控件 
map. addControl(new OpenLayers. Control.Scale( $ ('scale'))); 
// 添加 PanZoonBar 
map. addControl(new OpenLayers. Control. PanZoomBar()); 
map. addControl(new OpenLayers.Control.Permalink()); 
map. addControl(new OpenLayers. Control. ScaleLine()) ; 
map. addControl (new OpenLayers. Control. OverviewMap() ) ; 
// 放大 到 全 屏 
map. zoomToMaxExtent( ) ; 
} 
</script> 


</HEAD> 


< BODYonload- "init()"> 
«div» 
<div id= "map" class = "smallmap"></div> 
</div> 
<div id= "wrapper"> 
<div id= "location"></div> 
<div id= "scale"></div> 
</div> 
</BODY > 
</HTML> 


效果 如 图 6. 4-16 所 示 。 
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Scale = 1 : 111M 95.27344, -18. 3570 


6.4-16 ” 座 眼 控件 


6.4.4 添加 栅 格 图 层 


栅 格 图 层 的 数据 被 浑 染 为 图 像 ,而 图 像 是 由 像素 组 成 的 。 所 以 ,定义 栅 格 图 层 的 样式 ， 
本 质 上 是 定义 计算 每 个 像素 颜色 的 规则 。 通 过 改变 栅 格 图 层 定义 ,可 以 调整 栅 格 图 层 中 每 


个 像素 的 亮度 ,对比 度 ,选择 透明 颜色 等 。 


在 GIS 系统 中 应 用 最 多 的 数据 是 图 像 格 式 。OpenLayers 提供 了 几 个 类 来 使 用 不 同 的 
图 像 供应 商 整合 ,包括 专 有 的 供应 商 ( 如 GoogleMaps 和 BingMaps) 和 开放 源码 图 像 ( 如 作 
为 OpenStreetMap 或 者 任何 WMS 服务 提供 商 )。 对 于 任何 图 层 类 型 ,基本 类 是 
OpenLayers. Layer 类 , 它 提供 了 一 组 通用 属性 和 定义 的 任何 其 他 类 的 公共 行为 。 
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此 外 ,多 层次 的 OpenLayers. Layer. Grid 类 用 来 划分 继承 该 层 为 缩放 级 别 。 这 样 ,每 个 
缩放 级 别 覆 盖 相 同 的 面积 。 例 如 ,在 零 水 平 网 格 覆盖 全 球 ,在 一 个 级 别 有 四 个 网 格 覆 盖 整 个 
世界 ,等 等 。 

1. 使 用 谷歌 地 图 的 图 像 

谷歌 地 图 可 能 是 世界 上 最 知名 的 Web 地 图 应 用 程序 ,谷歌 栅 格 图 如 图 6. 4-17 所 示 。 
它 的 图 像 应 用 瓦 片 层 的 方式 ,是 众所周知 的 。 因 为 习惯 于 他 们 这 样 的 图 层 样式 ,开发 者 可 能 
也 倾向 于 应 用 在 自己 的 网 络 映射 项 目 上 。 


图 6.4-17 谷歌 地 图 


OpenLayers 与 OpenLayers. Layer. Google 类 实际 上 是 一 个 围绕 谷歌 地 图 API 的 封装 
代码 ,使 开发 者 能 够 混合 使 用 谷歌 地 图 瓦 片 和 OpenLayersAPI。 

使 用 谷歌 地 图 的 图 像 , 具 体 步 又 如 下 : 

(1) 创建 一 个 HTML 文件 ,并 添加 OpenLayers 的 依赖 关系 。 

(2) 添加 谷歌 地 图 API: 


< script type = "text/javascript" src = "http://maps. google. con/maps/ 
api/js?v = 3.5&sensor = false"></script > 


(3) 添加 一 个 Div 元 素 创建 地 图 : 


<! -- MapDOM 元 素 --> 
<div id= "google" style="width : 100% ; height: 100% ;"></div> 


(4) 在 一 个 script 元 素 ,添加 代码 来 创建 地 图 实例 ,并 添加 一 个 图 层 切 换 控制 : 
// 通 过 特定 DOM 元 素 创建 地 图 


var map = new OpenLayers. Map("google") ; 
map. addControl(new OpenLayers. Control. LayerSwitcher()) ; 
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(5) 创建 一 些 谷歌 地 图 并 将 其 添加 到 地 图 中 


var streets = new OpenLayers. Layer. Google("GoogleStreets", 
{ 
numZoomLevels: 20 
} 
); 
var physical = new OpenLayers. Layer. Google("GooglePhysical", 
t 
type: google. maps. MapTypeId. TERRAIN 
} 
); 
var hybrid = new OpenLayers. Layer. Google("GoogleHybrid", 
t 
type: google. maps. MapTypeld. HYBRID, numZoomLevels: 20 
} 
) 
var satellite = new OpenLayers.Layer. Google("GoogleSatellite", 


{ 
type: google. maps. MapTypeld. SATELLITE, numZoomLevels: 22 


} 

E addLayers([physical, streets, hybrid, satellite]); 

(6) 将 地 图 放 入 一 个 合适 的 位 置 ， 

map. setCenter(new OpenLayers.LonLat(0, 0), 2); 

在 这 个 实例 中 ,展示 了 如 何 使 用 谷歌 地 图 API, 添 加 谷歌 图 像 到 具体 的 OpenLayers 项 
Hip. 

2. 添加 WMS 图 层 

Web 地 图 服务 (WMS) ,是 由 开放 地 理 空间 联盟 (OGC) 开 发 的 一 个 标准 ,被 应 用 于 许多 
地 理 空间 服务 器 ,其 中 可 以 找到 自由 和 开放 源码 项 目的 GeoServer (http://geoserver. org) 
All MapServer (http://mapserver. org) 。 

作为 一 个 非常 基本 的 总 结 , 可 以 理解 WMS 服务 器 为 一 个 接受 了 一 些 GIS 相关 参数 (如 
投影 ,边界 框 等 ) 的 HTTPWeb 服务 器 ,并 返回 类 似 于 图 6. 4-18 所 示 的 地 图 。 

添加 一 个 WMS 图 层 的 步骤 如 下 : 

(1) 创建 一 个 HTML 文件 ,并 添加 OpenLayers 的 依赖 关系 。 

(2) 添加 一 个 Div 元 素 创建 地 图 : 


«div id- "ch2 wms layer" style="width : 100% ; height: 100 % ;"></div> 
(3) 创建 地 图 实例 : 


// 通过 特定 DOM 元 素 创建 地 图 
var map = new OpenLayers.Map("ch2 wms layer"); 
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图 6.4-18 添加 WMS 图 层 


(4) 添加 两 个 WMS 图 层 一 一 基本 层 和 县 加 层 : 


// 添加 WMS 图 层 
var wms = new OpenLayers. Layer. WMS( "Basic", "http://vmap0. tiles. osgeo. org/wms/vmap0", 
{ 
layers: 'basic' 
} 
) 
// 添加 NexradRMS 图 层 
var nexrad = new OpenLayers. Layer. WMS("Nexrad", 
"http: //nesonet. agron. iastate. edu/cgi — bin/wms/nexrad/n0r. cgi", 


{ 
layers: "nexrad- nOr", 
transparent: true, 
format: 'image/png' 

}, 

{ 


isBaseLayer: false 
} 
); 


map. addLayers([wms, nexrad]); 
(5) 在 地 图 视窗 中 添加 一 个 图 层 选择 控件 : 
// 添加 图 层 选 择 控件 
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map. addControl(new OpenLayers. Control.LayerSwitcher()); 
// 设置 图 层 视窗 


map. setCenter(new OpenLayers. LonLat( — 90,40), 4); 
(6) 该 OpenLayers. Layer. WMS 类 构造 函数 需要 实例 化 四 个 参数 (第 四 个 参数 是 可 
选 的 ): 


new OpenLayers.Layer.WMS(name, url, params, options) 


具体 参数 解释 如 下 : 

name: 通用 于 所 有 层 , 并 作为 一 个 用 户 友好 的 说 明 。 

utl; 一 个 必须 指向 WMS 服务 器 的 字符 串 。 

params; 是 一 个 对 象 ,并 且 可 以 包含 在 WMS 中 使 用 的 任何 参数 请 求 , 包 括 层 、 格 式 、 风 
格 等 。 

options: 是 包含 特定 性 质 的 可 选 对 象 图 层 对 象 , 其 中 包括 不 透明 度 isBaseLayer 等 。 

3. 更 改 缩放 效果 

平移 和 缩放 效果 都 关系 到 用 户 的 导航 体验 。 以 同样 的 方式 ,你 可 以 控制 图 层 缩放 级 别 
之 间 的 过 渡 效 果 。 该 OpenLayers. Layer 类 具有 transitionEffect 特性 ,这 就 决定 了 效果 应 
用 在 缩放 级 别 改 变 的 层 。 目 前 只 有 两 个 允许 值 : null 和 resize。 

null 值 表 示 没 有 过 渡 效 果 被 应 用 ,因为 当 你 改变 缩放 级 别 , 直 到 地 图 瓦 片 在 新 的 缩放 级 
别 被 加 载 时 你 才 可 能 看 到 图 层 的 消失 。 

要 更 改 缩放 级 别 ,请 执行 下 列 步骤 : 

(D 创建 一 个 HTML 文件 ,包括 所 需 的 OpenLayers, 

(2) 在 这 个 实例 中 ,添加 一 个 复 选 框 按钮 ,允许 改变 在 单个 层 之 间 的 过 渡 效 果 : 

Transitioneffect: < input type = " CheckBox" checked onChange = "transitionEffect" /> Resize 

(3) 添加 的 Div 2635 : 

«div id- "ch2 transition effect" style="width : 100% ; height:100 % ;"></div> 

(4) 添加 初始 化 的 地 图 和 创建 一 个 WMS 图 层 : 


< script type = "text/javascript"> 
// 创建 使 用 指定 的 DOM 元 素 的 地 图 
var map = new OpenLayers.Map("ch2 transition effect"); 
// 添加 WMS 层 
var wms = new OpenLayers. Layer. WMS( OpenLayersWMSBasic", 
"http: //vmap0. tiles. osgeo. org/wns/ vnap0" , 
{ 
layers: 'basic' 
h 
{ 


wrapDateLine: true, 
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transitionEffect: 'resize' 
} 
); 
map. addLayer(wms); 
map. setCenter(new OpenLayers. LonLat(0,0), 3); 


(5) 切换 transitionEffect 属性 值 的 函数 : 


function transitionEffect(checked) { 
if(checked) ( 
wms, transitionEffect = 'resize'; 
} else { 
wms. transitionEffect = null; 


) 


} 

</script > 

4. 创建 一 个 图 像 层 

有 时 你 可 能 不 需要 一 个 瓦 片 地 图 层 , 如 GoogleMaps、OpenStreetMap 或 者 WMS。 你 


可 能 已 经 有 一 个 地 理 参 考 图 像 , 知 道 它 的 投影 和 边界 框 ,并 想 呈 现在 地 图 上 。 
在 这 些 情况 下 ,OpenLayers 提供 OpenLayers. Layer. Image 类 ,允许 创造 一 个 简单 的 图 
像 层 。 地 理 参考 图 像 如 图 6. 4-19 ras. 


图 6.4-19 创建 一 个 图 像 层 


创建 一 个 图 像 层 的 具体 步骤 如 下 : 
(1) 创建 一 个 HTML 文件 ,添加 OpenLayers 的 依赖 关系 。 
(2) 添加 一 个 Div 元 素 创建 地 图 : 


<!-- 地 图 DOM 元 素 --> 
<div id= "image" style = "width : 100% ; height: 100 % ;"></div> 
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(3) 初始 化 地 图 ,并 添加 一 个 WMS 基底 层 : 


var map = new OpenLayers. Map(" image", 
{ 
allOverlays: true 
} 
n 
map. addControl(new OpenLayers. Control.LayerSwitcher()); 
// 添加 WMs 图 层 
var wms = new OpenLayers. Layer. WMS("OpenLayersWMSBasic", 
"http: //vmap0. tiles. osgeo. org/wms/vmap0", 
{ 
layers: 'basic' 
} 
) 
map. addLayer(wns); 


CD 定义 图 像 的 URL ,设置 其 范围 和 大 小 ,并 创建 一 个 图 像 层 : 


// 添加 一 个 Image 图 层 
var img url = "http://localhost:8080/openlayers - cookbook/recipes/data/nexrad. png" ; 
var img extent - new OpenLayers. Bounds 
(7 131. 0888671875, 30.5419921875, - 78.3544921875, 53.7451171875); 
var img size = new OpenLayers.Size(780, 480); 
var image = new OpenLayers. Layer. Image("ImageLayer", img url, img extent, img size, 
{ 
isBaseLayer: false, 
alwaysInRange: true 
) 
) 
map. addLayer( image); 
// 中 心 视图 
map. setCenter(new OpenLayers.LonLat( — 85, 40), 3); 


(5) iX OpenLayers. Layer. Image 类 构造 函数 需要 如 下 五 个 参数 : 
name: 该 层 所 需 的 描述 性 名 称 。 

url: 用 于 图 像 URL 地 址 。 

extend; 图 像 边 框 的 OpenLayers. Bounds 类 实例 。 

size: 图 像 尺 寸 像素 的 OpenLayers. Size 实例 。 

options; 表示 一 个 JavaScript 对 象 使 用 不 同 的 选项 层 。 


6.4.5 添加 矢量 图 层 


本 节 主 要 讨论 矢量 图 层 。 与 栅 格 图 层 相 比 .矢量 信息 是 GIS 系统 另 一 种 重要 的 信息 类 
型 。 在 GIS 中 ,现实 世界 的 现象 可 由 功能 的 概念 来 表示 : 它 可 以 是 一 个 地 方 , 就 像 一 个 城市 
或 一 个 村 庄 ; 它 可 以 是 一 条 道路 或 铁路 ; 它 可 以 是 一 个 地 区 、 一 个 湖 、 一 个 国家 的 边界 ， 
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等 等 。 

每 一 个 功能 都 有 一 组 属性 : 如 人 口 ,长度 等 。 它 在 视觉 上 表示 几何 符号 : 点 、 线 ,多 边 
形 等 。 用 一 些 视觉 风格 : 颜色 .半径 、 宽 度 等 。 

矢量 层 的 基本 类 是 OpenLayers. Layer. Vector 类 , 它 定义 了 常见 的 属性 和 行为 的 所 有 
子 类 。 

OpenLayers. Layer. Vector 类 包含 了 一 系列 的 功能 。 这 些 功能 实例 其 实 是 继承 了 
OpenLayers, Feature. Vector 的 子 类 。 

矢量 层 本 身 或 每 个 功能 可 以 有 一 个 与 之 关联 的 视觉 风格 ,这 将 是 用 于 呈现 在 地 图 上 的 
功能 。 

除了 屏幕 上 的 显示 图 层 , 这 里 需要 考虑 数据 源 。OpenLayers 提供 了 类 来 从 很 多 数据 源 
读 / 写 ,并 使 用 不 同 的 格式 ,如 GML,KML,GeoJSON,GeoRSS 等 。 

1. 添加 GML 图 层 

地 理 标 记 语言 (GML) 是 用 XML 语法 来 表示 地 理 功能 。 这 是 一 个 被 GIS 社区 广泛 接 
受 的 OGC 标准 ,一 个 GML 图 层 如 图 6. 4-20 所 示 。 


6.4-20 添加 GML 层 


在 GML 文件 中 创建 一 个 矢量 图 层 的 具体 步骤 如 下 : 
CD 创建 具有 所 需 OpenLayers 的 依赖 HTML 文件 ,并 添加 下 面 的 代码 。 首 先 添加 的 
Div 元 素 包含 地 图 : 
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<! -- 地 图 DOM 元 素 --> 
<div id- "ch3 gnl" style="width : 100 & ; height: 100 $ ;"></div> 


(2) 添加 JavaScript 代码 来 初始 化 地 图 ,添加 基础 层 和 图 层 选 择 控件 : 


var map = new OpenLayers.Map("ch3_gml"); 

var layer = new OpenLayers. Layer. OSM( "OpenStreetMap" ) ; 
map. addLayer (layer) ; 

map. addControl(new OpenLayers. Control. LayerSwitcher()) ; 
map. setCenter(new OpenLayers. LonLat(0,0), 2); 


(3) 添加 一 个 GML 空间 数据 的 矢量 图 层 : 


map. addLayer(new OpenLayers. Layer. Vector("Europe (GML)", 
i protocol: new OpenLayers. Protocol. HTTP({ 
url: "http://localhost :8080/OpenLayers/book/7/7. 3/data/europe. gml", 
format: new OpenLayers. Format. GML( ) 
Pu [new OpenLayers. Strategy. Fixed( ) ] 
}) 
) 
2. 添加 KML 图 层 
KML 是 Keyhole 标记 语言 (Keyhole Markup Language) 的 缩写 ,最 初 由 Keyhole 公司 
开发 ,是 一 种 基于 XML 语法 格式 的 、 用 于 描述 和 保存 地 理 信 息 ( 点 、 线 ,图 像 , 多 边 形 和 模型 
等 ) 的 编码 规范 , 可 以 被 GoogleEarth 和 GoogleMaps 识别 并 显示 。GoogleEarth 和 
GoogleMaps 处 理 KML 文件 的 方式 与 网 页 浏览 器 处 理 HTML 和 XML 文件 的 方式 类 似 。 
18 HTML 一 样 ,KML 使 用 包含 名 称 \、 属 性 的 标签 (tag) 来 确定 显示 方式 。 因 此 ,可 将 
GoogleEarth 和 GoogleMaps 视 为 KML 文件 浏览 器 。 在 2008 年 4 月 ,微软 的 OOXML 成 
为 国际 标准 后 ,Google 公司 宣布 放弃 对 KML 的 控制 权 , 由 开放 地 理 信息 联盟 (OGC) 接 管 
KML 语言 ,并 将 GoogleEarth 及 GoogleMaps 使 用 的 KML 语言 变 成 为 一 个 国际 标准 。 
Keyhole 标记 语言 (KML) 已 成 为 最 广泛 使 用 的 格式 之 一 , 它 变 成 了 一 个 OGC 标准 。 
一 个 KML 全 球 运输 路 线 如 图 6. 4-21 所 示 。 
从 一 个 KML 文件 添加 功能 的 具体 步骤 如 下 : 
(1) 创建 包含 OpenLayers 的 HTML 文件 ,并 添加 下 面 的 代码 。 首 先 添 加 Div 元 素 包 
含 地 图 : 
<! -- 地 图 DOM 元 素 --> 
<div id= "ch3_ kml" style="width : 100% ; height: 100 $ ;"></div> 


(2) 初始 化 一 个 map 实例 ,添加 一 个 基础 层 , 添 加 图 层 切 换 控制 和 中 心 观察 点 : 


var map = new OpenLayers.Map("ch3 kml"); 
var layer = new OpenLayers. Layer. OSM( "OpenStreetMap" ) ; 
layer.wrapDateLine = false; 
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图 6.4-21 KML 全 球 运输 路 线 


(3) 添加 一 个 矢量 图 层 , 从 一 个 KML 文件 加 载 数据 : 


map. addControl(new OpenLayers. Control.LayerSwitcher()); 
map. setCenter(new OpenLayers. LonLat(0,0), 2); 
map. addLayer(new OpenLayers. Layer. Vector("GlobalUnderseaFiberCables", 


t 
protocol: new OpenLayers. Protocol. HTTP({ 
url: "http://localhost :8080/OpenLayers/book/7/7. 3/data/globalundersea. kml", 


format: new OpenLayers. Format. KML({ 
extractStyles: true, 
extractAttributes: true 
n 
n. 
strategies: [new OpenLayers. Strategy. Fixed()] 


n 


3. 添加 地 图 标记 
标记 广泛 应 用 于 网 络 应 用 程序 映射 ,他 们 使 开发 者 能 够 通过 显示 所 需 的 位 置 的 图 标 快 


速 识 别 兴 趣 点 。 
这 里 介绍 如 何 通过 使 用 OpenLayers. Marke 和 OpenLayers. Layer. Markers 类 标记 添 


加 到 地 图 ,实现 效果 如 图 6. 4-22 所 示 。 
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图 6.4-22 添加 地 图 标记 


CD 创建 包含 OpenLayers 包 的 HTML 文件 ,并 添加 下 面 的 代码 。 首 先 添 加 Div 元 素 
包含 地 图 : 


<! -- 地 图 DOM 元 素 --> 

<div id = "ch3 markers" style = "width : 100% ; height: 100 % ;"></div> 
var map 7 new OpenLayers.Map("ch3 markers"); 

var layer = new OpenLayers. Layer. OSM("OpenStreetMap" ) ; 

map. addLayer (layer) ; 

map. addControl(new OpenLayers. Control. LayerSwitcher()) ; 

map. setCenter(new OpenLayers. LonLat(0,0), 2); 


(2) 添加 一 个 新 的 层 OpenLayers. Layer. Markers. Jl F (3. OpenLayers. Marker 
实例 : 


var markers = new OpenLayers.Layer.Markers("Markers"); 
map. addLayer (markers); 


(3) 使 用 一 个 随机 数组 图 标 来 创建 随机 标记 ,如 图 6. 4-23 所 示 。 
// 创 建 一 些 随机 标记 


var icons = [ 
// 这 里 添加 一 组 数组 的 标记 图 片 
IE 
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for(var i=0; i<150; i++) ( 

// 随机 计算 标记 摆 放 经 纬度 坐标 

var icon = Math. floor(Math. random() * icons. length ); 

var px = Math.random() * 360 - 180; 

var py 7 Math.randon() * 170 - 85; 

// 新 建 标记 大 小 ,像素 点 

var size = new OpenLayers. Size(32, 37); 

var offset = new OpenLayers.Pixel( — (size.w/2), - size.h); 

var icon = new OpenLayers. Icon( '. /data/icons/' * icons[icon], size, offset); 

icon. setOpacity(0.7); 

// 将 经 纬度 坐标 转换 为 地 图 工程 

var lonlat = new OpenLayers.LonLat(px, py); 

lonlat. transforn(new OpenLayers. Projection("EPSG:4326"), 
new OpenLayers. Projection("EPSG:900913")); 

// 添加 标记 

var marker = new OpenLayers.Marker(lonlat, icon); 

// 事 件 处 理 程序 , 当 鼠 标 移动 图 标 时 ,图 标 变 大 更 改 其 不 透明 度 

marker.events.register("mouseover", marker, function () ( 
this. inflate(1.2); 
this.setOpacity(1); 

ni 

// 事 件 处 理 程序 , 当 鼠 标 移动 图 标 时 ,图 标 变 大 更 改 其 不 透明 度 

marker.events.register("mouseout", marker, function () { 
this. inflate(1/1.2); 
this. setOpacity(0.7); 

Di 

markers. addMarker(marker) ; 


图 6. 4-23 ”鼠标 移 至 标记 高 亮 显示 


4. 使 用 点 要 素 作 为 标记 
显示 标志 不 限于 使 用 OpenLayers. Marker 和 OpenLayers. Layer. Markers 类 。 
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一 个 标记 ,可 以 理解 为 一 个 兴趣 点 (POD 。 这 里 放置 一 个 图 标 来 标识 兴趣 点 及 其 相关 
信息 : 一 座 丰 碑 .一 个 停车 场 、 一 个 桥梁 等 。 

下 面 将 学 习 如 何 使 用 与 这 些 功 能 相关 联 的 几何 类 型 创建 标记 ,实现 效果 如 图 6. 4-24 
Bim. 


图 6.4-24 使 用 点 要 素 作 为 标记 


(1) 创建 包含 OpenLayers 包 的 HTML 文件 ,并 添加 下 面 的 代码 。 首 先 添 加 Div 元 素 
包含 地 图 : 


<div id="ch3_feature_markers" style="width : 100 $ ; height: 100% ;"></div> 
C2) 启动 初始 化 地 图 的 实例 ,并 添加 一 个 基础 层 和 控制 : 


var map = new OpenLayers.Map("ch3 feature markers"); 
var layer = new OpenLayers. Layer. OSM( "OpenStreetMap" ) ; 
map. addLayer (layer) ; 

map. addControl(new OpenLayers. Control. LayerSwitcher()) ; 
map. setCenter(new OpenLayers. LonLat(0,0), 2); 


(3) 添加 包含 一 组 随机 标记 的 一 个 矢量 图 层 : 


var pointLayer = new OpenLayers.Layer.Vector("Features", (projection: "EPSG:933913"]); 
map. addLayer(pointLayer); 


(4) 创建 一 些 随机 点 ,然后 使 用 addFeatures 方法 在 矢量 图 层 中 添加 : 
// 新 建 一 些 随机 的 要 素 点 


var pointFeatures = []; 
for(var i=0; i«150; i++) ( 
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var px = Math.random() * 360 - 180; 
var py = Math.randon() * 170 - 85; 
// 将 经 纬度 坐标 转换 为 地 图 工程 
var lonlat = new OpenLayers.LonLat(px, py); 
lonlat. transform(new OpenLayers. Projection("EPSG:4326"), 
new OpenLayers. Projection("EPSG:900913")); 
var pointGeometry = new OpenLayers. Geometry. Point(lonlat.lon, lonlat. lat); 
var pointFeature = new OpenLayers. Feature. Vector(pointGeometry); 
pointFeatures. push(pointFeature); 
} 
// 将 要 素 添 加 到 图 层 中 
pointLayer. addFeatures(pointFeatures); 


(5) 连接 两 个 事件 侦 听 器 的 矢量 层 的 featureselected 和 featureunselected 事件 , 侦 听 器 
将 负责 更 换 该 特征 的 风格 : 


// 当 要 素 选 中 之 后 的 事件 控制 
pointLayer. events. register("featureselected", null, function (event){ 
var layer = event. feature. layer; 
event. feature. style = 
{ 
fillColor: '# ££9900', 
fillOpacity: 0.7, 
strokeColor: '# aaa’, 
pointRadius: 12 
}; 
layer.drawFeature(event. feature); 
n; 
// 当 要素 未 选中 之 后 的 事件 控制 
pointLayer. events.register("featureunselected", null, function (event)( 
var layer = event. feature. layer; 
event. feature. style = null; 
event. feature. renderIntent = null; 
layer. drawFeature(event. feature) ; 


H); 
(6) 在 地 图 上 附加 一 个 SelectFeature 控件 ,并 引用 矢量 层 : 


// 添加 到 触发 矢量 图 层 上 的 事件 需要 选择 功能 控制 

var selectControl = new OpenLayers. Control. SelectFeature(pointLayer) ; 
map. addControl(selectControl); 

selectControl.activate(); 


5. 使 用 弹出 窗口 

一 个 常见 网 页 地 图 应 用 功能 的 特征 是 显示 地 图 包含 的 一 些 相关 的 信息 。 这 些 功能 包括 
通过 点 、 线 .多边形 等 来 指 代 任何 真实 的 现象 或 者 直观 特性 。 

当然 ,也 可 以 选择 一 个 功能 检索 其 相关 信息 ,并 在 任何 地 方 显 示 它 的 应 用 程序 布局 。 最 
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常见 的 方式 是 使 用 弹出 窗口 来 显示 它 , 如 图 6. 4-25 所 示 。 


Feature: 
OpenLayers. Feature. Vector 264 


Location: 
POINT(-246693. 77199648827 2875251. 6030832464) 


图 6.4-25 使 用 弹出 窗口 


(1) 创建 包含 OpenLayers 包 的 HTML 文件 ,并 添加 下 面 的 代码 。 首 先 添加 Div 元 素 
包含 地 图 : 


<div id = "ch3 popups" style="width : 100%; height: 100% ;"></div> 
(2) 在 JavaScript 部 分 ,初始 化 地 图 并 添加 一 个 基础 层 : 


var map = new OpenLayers.Map("ch3 popups"); 

var layer = new OpenLayers. Layer. OSM( "OpenStreetMap" ) ; 
map. addLayer(layer); 

map. addControl(new OpenLayers. Control.LayerSwitcher()); 
map. setCenter(new OpenLayers.LonLat(0,0), 2); 


(3) 创建 矢量 层 ,并 添加 一 些 特性 : 


var pointLayer = new OpenLayers. Layer. Vector("Features", (projection: "EPSG:900913"]); 
map. addLayer(pointLayer) ; 


(4) 添加 一 些 随 机 特性 的 矢量 层 : 
// 创建 一 些 随 机 的 要 素 点 


var pointFeatures = []; 
for(var i=0; i<150; i++) 
{ 
var icon = Math. floor(Math. random() * icons. length ); 
var px = Math.random() * 360 - 180; 
var py = Math.random() * 170 - 85; 
var lonlat = new OpenLayers. LonLat(px, py); 
lonlat. transform(new OpenLayers. Projection("EPSG:4326"), 
new OpenLayers. Projection("EPSG:900913")); 
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var pointGeometry = new OpenLayers. Geometry.Point(lonlat.lon, lonlat. lat); 
var pointFeature = new OpenLayers. Feature. Vector(pointGeometry, null, 
t 
pointRadius: 16, 
fillOpacity: 0.7, 
externalGraphic: 
"http: //localhost :8080/openlayers - cookbook/recipes/data/icons/'+ icons[icon] 
D 
pointFeatures. push(pointFeature); 
) 


pointLayer. addFeatures(pointFeatures); 


(5) 加 入 负责 管理 该 特性 的 选项 ,以 显示 弹出 的 代码 : 


// 添加 到 触发 矢量 图 层 上 的 事件 需要 选择 功能 控制 
Var selectControl = new OpenLayers. Control.SelectFeature(pointLayer, 
t 
hover: true, 
onSelect: function (feature) 
{ 
var layer = feature. layer; 
feature.style.fillOpacity - 1; 
feature.style.pointRadius - 20; 
layer. drawFeature( feature) ; 
var content = "<div><strong>Feature:</strong><br/>" + feature. id 
"< br/>< br/»« strong > Location:«/strong»« br/»" + 
feature. geometry + "</div>"; 
var popup = new OpenLayers. Popup. FramedCloud( 
feature. id *" popup", 
feature. geometry. getBounds( ) . getCenterLonLat(), 
new OpenLayers.Size(250, 100), 
content, 
null, 
false, 
null 


E 
feature.popup = popup; 
map. addPopup( popup) ; 

}, 

onUnselect: function (feature) 

{ 
var layer = feature. layer; 
feature. style. fillOpacity = 0.7; 
feature. style. pointRadius = 16; 
feature. renderIntent = null; 
layer. drawFeature(feature) ; 
map. removePopup( feature. popup) ; 


H; 
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map. addControl(selectControl); 
selectControl.activate(); 


6.4.6 使 用 事件 


OpenLayers 中 的 事件 封装 是 一 大 亮点 ,非常 值得 学 习 。 谈 到 事件 机 制 ,涉及 控件 
OpenLayers. Control 类 , OpenLayers. Marker 类 、OpenLayers. Icon 等 类 。 在 外 观 上 控件 
通过 Marker 和 Icon 表现 出 来 ,而 事件 包含 在 控件 之 中 。 

控件 实现 的 核心 是 handler 类 ,每 个 控件 都 包含 对 handler 的 引用 ,通过 active 和 
deactive 两 个 方法 ,实现 动态 激活 和 注销 。 

OpenLayers 中 的 事件 有 两 种 : 一 种 是 浏览 器 事件 (比如 onclick ,onmouseup 等 ), 男 一 
种 是 自 定义 的 事件 。 自 定义 的 事件 如 addLayer、addControl 等 , 它 不 像 浏览 器 事件 会 绑 定 
相应 的 dom 节点 , 它 是 与 layer、map 等 关联 的 。 

OpenLayers 中 支持 的 浏览 器 事件 类 型 有 (以 常量 的 形式 提供 ) : 


BROWSER EVENTS: 


[ 
"mouseover", "mouseout", 
"mousedown", "mouseup", "mousemove", 
"click", "dblclick", 
"resize", "focus", "blur" 


] 


构造 函数 的 实现 过 程 : 


initialize: function (object, element, eventTypes, fallThrough) 


{ 


this. object = object; 
this. element = element; 
this. eventTypes = eventTypes; 


this. fallTh rough = fallTh rough; 
this. listeners = {}; 
this. eventh andler = OpenLayers.Function .bindAsEventListener( 
this. handleBrowserEvent 
E 
if (this.eventTypes != null) 
{ 
for (var i = 0; i< this. eventTypes. length ; i++) ( 
this. addEventType( this. eventTypes[ i]); 
} 
} 
if (this. element != null) { 
this. attachToElement(element) ; 


} 
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initialize(object，element，eventTypes，fallThrough) 方 法 会 以 数组 eventTypes 的 每 
个 元 素 为 key 建立 哈 希 表 listeners, 表 中 每 个 键 对 应 一 个 数组 。 还 会 给 this. eventhandler 
赋值 , 它 实 际 上 只 是 一 个 包装 了 triggerEvent 事件 触发 函数 的 方法 。 所 有 的 事件 ,包括 浏览 
器 事件 和 自 定义 事件 都 是 通过 它 来 中 转 的 。 然 后 ,initialize 将 所 有 的 浏览 器 事件 放 入 
listeners 中 ,并 为 其 绑 定 相 应 的 dom 节点 element 和 this. eventhandler 事件 处 理 函 数 
OpenLayers. Event. observe(element, eventType, this. eventh andler) ,节点 上 事件 触发 的 
时 候 会 把 事件 传 给 this. eventh andler, 它 调用 triggerEvent, 从 而 将 事件 传 出 来 。 

其 他 的 成 员 函 数 如 下 : 

(1) addEventType: 在 事件 对 象 中 添加 一 个 新 的 事件 类 型 。 

(2) attachToElement: 把 浏览 器 事件 关联 到 相应 的 dom 元 素 上 。 

(3) register: 在 事件 对 象 中 注册 事件 。 

(4) unregister: 注销 方法 。 

(5) remove; 删除 所 有 监听 器 对 于 一 个 给 定 的 事件 类 型 。 

(6) triggerEvent: 触发 指定 的 注册 事件 。 


6.4.7 添加 控件 


本 节 介 绍 OpenLayers 的 内 容 ( 控 件 )。 控 件 使 用 图 层 放大 或 缩小 地 图 ,执行 诸如 编辑 、 
测量 距离 等 。 从 本 质 上 讲 ,控件 允许 我 们 与 地 图 之 间 进 行 互动 。 

OpenLayers. Control 类 是 所 有 控件 的 基本 类 ,一 个 控件 包含 常用 的 属性 和 方法 : 

D 连接 到 地 图 ; 

(2) 触发 事件 ; 

(3) 激活 或 停 用 ; 

OD 有 一 个 可 视 化 表示 形式 (如 按钮 ) 或 完全 没有 视觉 表示 (如 拖 动 动作 ) 。 

OpenLayers 中 的 控件 是 通过 加 载 到 地 图 上 而 起 作用 的 ,也 是 地 图 表现 的 一 部 分 。 同 
时 ,控件 需要 对 地 图 发 生 作 用 ,所 以 每 个 控件 也 持 有 对 地 图 (map 对 象 ) 的 引用 。 

前 面 说 过 ,控件 是 与 事件 相关 联 的 。 具 体 地 说 ,就 是 控件 的 实现 是 依赖 于 事件 绑 定 的 ， 
每 个 OpenLayers. Control 及 其 子 类 的 实例 都 会 持 有 一 个 handler 的 引用 。 

1. 添加 和 删除 控件 

OpenLayers 提供 了 大 量 的 控件 及 常用 的 应 用 程序 映射 。 下 面 这 个 实例 展示 了 如 何 使 
用 具有 可 视 化 表示 形式 的 最 常用 控件 。 该 列表 包括 OverviewMap 控制 .Scale 和 ScaleLine 
控制 .Graticule 控制 、LayerSwitcher 控制 .PanZoomBar 控制 .mousePosition 控制 和 
Premalink 控制 ,如 图 6. 4-26 所 示 。 

// 实 例 化 一 个 控件 

var controll = new OpenLayers.Control({div: myDiv}); 

// 向 地 图 中 添加 控件 


var map = new OpenLayers. Map( 'map', { controls: [] }); 
map. addControl(controll ); 
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Dverlays 


6.4-26 地 图 控件 添加 


对 于 一 些 常用 的 OpenLayers 控件 ,项 目 本 身 都 封装 好 了 ,用 下 面 的 语句 添加 : 


map. 
map. 
map. 
map. 
map. 
map. 
map. 
map. 


addControl(new OpenLayers 
addControl(new OpenLayers 
addControl(new OpenLayers 
addControl(new OpenLayers 
addControl(new OpenLayers 
addControl(new OpenLayers 
addControl(new OpenLayers 
addControl(new OpenLayers 


- Control. PanZoonBar()) ; 

. Control. MouseToolbar( ) ) ; 

. Control. LayerSwitcher({ ‘ascending’: false} ) ); 
. Control. Permalink()) ; 

. Control. Permalink( 'permal ink") ) ; 

. Control.MousePosition()); 

. Control. OverviewMap( ) ); 

. Control. KeyboardDefaults() ) ; 


下 面 先 看 看 OpenLayers. Control 基 类 的 实现 过 程 , 再 选择 几 个 典型 的 子 类 分 析 一 下 。 


1) OpenLayers. Control 


/设置 控件 的 map 属性 , 即 控件 所 引用 的 地 图 
setMap: function (map) { 


) 


this.map = map; 
if (this. handler) { 


this. handler. setMap(map) ; 


) 


// draw Jr ik , 当 控 件 准 备 显示 在 地 图 上 时 被 调用 , 这 个 方法 只 对 有 图 标的 控件 起 作用 


draw: function (px) { 


) 


if (this.div == null)( 


this.div = OpenLayers.Util.createDiv(); 
this.div.id = this. id; 


this.div.className - 


if (px != null) ( 


this. displayClass; 


this.position = px.clone(); 


) 


this.moveTo(this.position); 


return this.div; 


前 面 说 过 ,OpenLayers. Control 及 其 子 类 的 实例 都 会 持 有 一 个 handler 的 引用 ,因为 每 
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个 控件 起 作用 时 , 鼠标 事件 都 不 一 样 ,这 需要 动态 绑 定 和 接触 绑 定 。 在 OpenLayers. 
Control 中 通过 active 和 deactive 两 个 方法 实现 ,就 是 动态 激活 和 注销 。 
激活 方法 如 下 : 


activate: function () { 
if (this.active) { 
return false; 
} 
if (this. handler) { 
this. handler. activate(); 
} 
this. active = true; 
return true; 


) 
注销 方法 如 下 : 


deactivate: function () { 

if (this.active) { 

if (this.handler) { 
this. handler. deactivate(); 

) 
this.active - false; 
return true; 

} 

return false; 

} 

再 来 看 看 OpenLayers. Control 的 子 类 , 即 各 类 特色 控件 。 

HEFE“ JE IR fë VF” OpenLayers. Control. OverviewMap 和 “矢量 编辑 工具 条 控件 ” 
OpenLayers. Control. EditingToolbar 来 讨论 。 顺 便 说 一 名 ,OpenLayers 中 的 控件 有 些 是 
需要 图 标的 , 像 EditingToolbar; 有 些 是 不 需要 图 标的 , 像 OpenLayers. Control. DragPan。 

2) OpenLayers. Control. OverviewMap 

“应 眼 ” 实 际 上 也 是 地 图 导航 的 一 种 形式 ,在 外 部 形态 上 跟 图 层 开 关 控 件 有 点 儿 像 。 

添加 应 眼 控 件 的 语句 如 下 : 


map. addControl(new OpenLayers. Control.OverviewMap()); 


在 它 实现 的 成 员 函 数 中 ,draw 函数 是 核心 ,继承 基 类 OpenLayers. Control, 在 地 图 中 显 
示 这 个 控件 。 
此 控件 关联 了 一 些 浏 览 器 事件 ,例如 : 


rectMouseDown: function (evt) { 
if(!OpenLayers. Event. isLeftClick(evt)) 
return ; 
this.rectd ragStart = evt.xy.clone(); 
this.performedRectd rag - false; 
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OpenLayers. Event. stop(evt); 
} 


3) OpenLayers. Control. EditingToolbar 
OpenLayers 从 2. 3 版 起 就 对 矢量 编辑 进行 了 支持 ,完成 点 、 线 、 面 的 编辑 功能 。 
同样 , 它 也 是 用 drew 方法 激活 : 


draw: function () { 
Var div = OpenLayers. Control. Panel. prototype. draw. apply(this, arguments); 
this.activateControl(this.controls[0]); 
return div; 

} 


下 面 的 代码 是 使 用 此 控件 的 具体 过 程 : 


Var map, layer; 

map = new OpenLayers.Map( 'map', ( controls: [] } ); 

layer = new OpenLayers. Layer. WMS( "OpenLayersWMS", 
"http://1labs. metacarta. com/wms/vmap0", (layers: 'basic') ); 
map. addLayer (layer); 

vlayer 7 new OpenLayers. Layer. Vector( "Editable " ); 

map. addLayer(vlayer); 

map. addControl(new OpenLayers. Control.PanZoonBar()); 

map. addControl(new OpenLayers. Control.EditingToolbar(vlayer)); 
map. setCenter(new OpenLayers.LonLat(lon, lat), zoom); 


2. 在 地 图 外 放置 控件 
默认 情况 下 ,所 有 的 控件 都 放置 在 地 图 上 。 通 过 这 种 方式 ,如 PanPanel 控制 、 
EditingToolbar 或 MousePosition 呈现 在 任何 图 层 之 上 ,如 图 6. 4-27 所 示 。 


Position: 
-1017529. 72039, 2260090. 05202 


图 6.4-27 在 地 图 外 放置 控件 
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在 这 个 实例 中 ,将 创建 一 个 地 图 ,导航 工具 栏 和 鼠标 位 置 控制 都 放 在 地 图 外 面 。 具 体 步 
又 如 下 : 

CD 创建 一 个 HTML 文件 ,并 添加 OpenLayers 的 依赖 关系 。 这 里 添加 以 下 的 CSS 代 
码 重新 定义 控件 样式 : 


<style> 
.olControlNavToolbar { 
top: Opx; 
left: Opx; 
float: left; 
} 
. olControlNavToolbardiv { 
float: left; 
) 
</style> 
<div id= "control outside" style= "width : 100% ; height: 90 & ;"></div> 


(2) 添加 HTML 代码 ,放置 地 图 上 的 两 个 控件 : 


<table> 
<tr> 
<td> 
Navigation: <div id = "navigation" class = "olControlNavToolbar"></div > 
</td> 
<td> 
Position: <div id = "mouseposition" style = "font- size: smaller;"></div> 
</td> 
</tr> 
</table> 


(3) 创建 地 图 实例 ,并 添加 一 个 基础 层 : 


< script type = "text/javascript"» 
var map = new OpenLayers.Map("ch05 control outside"); 
var osm = new OpenLayers. Layer. OSM() ; 
map. addLayer(osm) ; 
map. setCenter(new OpenLayers.LonLat(0, 0), 3); 


(4) 添加 鼠标 的 位 置 和 导航 工具 栏 控件 : 


Var mousePosition = new OpenLayers. Control. MousePosition 
a 
div: document. getElementById( mouseposition') 
Di 
map. addControl(mousePosition); 
var navToolbarControl = new OpenLayers. Control. NavToolbar 
({ 
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div: document. getElementById("navigation") 
ni 
map. addControl(navToolbarControl); 
«/script» 


3. 在 多 个 矢量 图 层 编辑 要 素 

当 用 到 矢量 信息 时 ,在 GIS 应 用 中 最 常见 的 事件 是 : 增加 新 的 要 素 。 

OpenLayers 有 足够 的 控件 ,所 以 没有 必要 推倒 重 来 。 有 一 套 工具 ,需要 做 的 唯一 一 件 
事 就 是 学 习 如 何 使 用 。 

OpenLayers 有 OpenLayers. Control. EditingToolbar 控件 ,显示 一 个 工具 栏 与 一 些 按 
钮 来 添加 多 边 形 .折线 ,如 图 6. 4-28 所 示 。 


Vector Layer A: @ Vector Layer B: O 


图 6. 4-28 多 个 矢量 图 层 编辑 功能 


在 地 图 中 可 以 有 很 多 矢量 图 层 ,控件 需要 指定 相应 的 图 层 。 这 个 实例 的 目的 是 展示 如 
何 使 用 相同 的 控制 功能 添加 到 多 个 图 层 。 

这 样 一 来 ,这 个 应 用 程序 在 两 个 向 量 图 层 的 地 图 中 ,使 用 单 选 按钮 就 能 选择 要 创建 新 的 
功能 层 。 

具体 步骤 如 下 : 

CD 添加 HTML 代码 来 创建 一 对 单 选 按钮 ,这 将 允许 选择 绘制 矢量 图 层 : 


< form action = ""> 
VectorLayerA: < input id= "rbA" type = "radio" onChange = "layerAChanged" 
name = "layer" value = "layerA" checked/> 
VectorLayerB: < input id= "rbB" type = "radio" onChange = "layerBChanged" 
name = "layer" value = "layerB"/» 

</form> 
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<div id = "editing vector" style="width : 100% ; height: 100% 7"></div> 
(2) 创建 一 个 地 图 实例 ,并 添加 一 个 基础 层 : 


var map = new OpenLayers.Map("editing vector"); 

var osm = new OpenLayers. Layer. OSM() ; 

map. addLayer(osm); 

map. addControl(new OpenLayers. Control.LayerSwitcher()); 
map. setCenter(new OpenLayers.LonLat(0, 0), 3); 


(3) 新 增 两 个 矢量 图 层 : 


var vectorLayerA 
var vectorLayerB 


new OpenLayers. Layer. Vector("VectorlayerA"); 
new OpenLayers. Layer. Vector("VectorlayerB"); 
map. addLayers([vectorLayerA, vectorLayerB]); 


(4) 添加 编辑 工具 栏 控件 ,关联 第 一 个 向 量 层 : 


var editingToolbarControl = new OpenLayers. Control. EditingToolbar(vectorLayerA) ; 
map. addControl(editingToolbarControl); 


C5) 通过 代码 实现 来 处 理 单 选 按钮 的 变化 , 它 会 改变 相关 的 编辑 工具 栏 控制 层 : 


function layerAChanged(checked) { 
if(checked) 
{ 
var controls = editingTbolbarControl. getControlsByClass("OpenLayers. Control. DrawFeature" ) 
for(var i70; i<controls. length ; i++) 


{ 
controls[i]. layer = vectorLayerA; 
} 
} 
} 
function layerBChanged(checked) 
{ 
if(checked) 
{ 
var controls = 
editingToolbarControl. getControlsByClass 
("OpenLayers. Control. DrawFeature" ) ; 
for(var i=0; i<controls. length ; i++) 
{ 
controls[i]. layer = vectorLayerB; 
i 
} 
} 
4. 修改 要 素 


在 Web 制图 应 用 程序 工作 时 ,用 户 添加 新 的 功能 将 是 一 个 理想 的 要 求 ,但 对 于 修改 功 
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能 ,如 移动 顶点 ,旋转 功能 \ 修 改 尺寸 等 问题 要 通过 修改 要 素 实 现 。 


OpenLayers 提供 强大 的 OpenLayers. Control. ModifyFeature 控件 ,如 图 6. 4-29 所 示 。 


> 
t 


O 导航 © Be © B © Beim © 画 规则 多 边 形 - ib p B 不 规则 
© 修改 功能 
B 允许 创建 项 点 O 允许 旋转 D 允许 调整 大 小 (图 保持 宽 高 比例 ) D 允许 拖 动 


图 6. 4-29 ”修改 功能 


实例 的 导航 功能 中 允许 画 点 、 线 和 多 边 形 ,可 对 图 形 进行 选择 旋转 、 调 整 大 小 、 拖 动 等 


操作 。 
关键 函数 如 下 : 


function update() 
{ 

controls. modify. mode = OpenLayers. Control. ModifyFeature. RESHAPE; 

var rotate = document. getElementById("rotate"). checked; 

if (rotate) 

{ 
controls. modify. mode | = OpenLayers. Control. ModifyFeature. ROTATE; 

} 

var resize = document. getElementByld("resize") . checked; 

if(resize) 

{ 
controls. modify. mode | = OpenLayers. Control. ModifyFeature. RESIZE; 
var keepAspectRatio = document. getElementByld("keepAspectRatio") . checked; 
if (keepAspectRatio) 
{ 

controls. modify. mode& = ~OpenLayers. Control. ModifyFeature. RESHAPE; 

} 

} 

var drag = document. getElementById("drag"). checked; 

if(drag) 


I> 259 


4 
m 


260 «|| WebGIS 工 程 项 目 开 发 


{ 
controls.modify.mode | = OpenLayers.Control.ModifyFeature. DRAG; 
) 
if (rotate || drag) 
t 


controls.modify.mode& = ~OpenLayers. Control.ModifyFeature. RESHAPE; 
) 


controls.modify.createVertices = document. getElementById("createVertices"). checked; 
var sides = parseInt(document. getElenentById("sides"). value); 
sides = Math.max(3, isNaN(sides) ? 0 : sides); 
controls. regular. handler. sides = sides; 
var irregular = document. getElementById("irregular"). checked; 
controls. regular. handler. irregular = irregular; 
} 


5. 测量 距离 和 面积 

测量 距离 或 面积 的 功能 是 地 理 信息 系统 应 用 的 重要 的 功能 。 在 下 面 这 个 实例 中 ,将 看 
到 OpenLayers 提供 给 开发 者 的 测量 功能 。 

该 实例 将 在 地 图 下 方 显示 按钮 分 别 用 来 测量 地 图 距离 ,测量 面积 等 ,如 图 6. 4-30 所 示 。 


m 


\ 
t 


22.46704, -12.6046 


Oo 导航 测量 面积 : 1031830.894 km? 
O 测量 距离 
ie 测量 面积 


6.4-30 测量 距离 和 面积 


具体 步骤 如 下 : 

(1) 创建 一 个 HTML 文件 ,并 添加 OpenLayers 的 依赖 关系 。 添 加 以 下 CSS 重新 定义 
的 控件 到 某 些 方面 需要 的 代码 中 : 

< style type = "text/css"> 


st controlToggleli { 
list- style: none; 
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) 
p{ 
width : 512px; 
} 
# options { 
position: relative; 
width : 512px; 
} 
+ output { 
float: right; 
} 
. olImageLoadError { 
background - color: transparent ! import ant; 
} 
</style> 


添加 HTML 代码 ,放置 在 地 图 下 方 的 按钮 会 测量 这 个 面积 : 


<div id= "map" class = "smallmap"></div> 
<div id = "options" 
<div id= "output"» 
</div> 
<ul id= "controlToggle"> 
<li> 
< input type = "radio" name = "type" value = "none" 
noneToggle"onclick = "toggleControl(this);" checked = "checked" /> 
noneToggle"» 5 fii</label > 


< label for = 
</li> 
<li> 
< input type = "radio" name = "type" value = "line" id= "lineToggle" 
onclick = "toggleControl(this);" /> 
< label for = "lineToggle"jlil fit JE Bj «/ label 
</li> 
<li> 
< input type = "radio" name = "type" value = "polygon" id= "polygonToggle" 
onclick = "toggleControl(this);" /» 
< label for = "polygonToggle"> 测 量 面积 </label > 
</1i> 
</ul> 
</div> 


创建 地 图 实例 ,并 添加 一 个 基础 层 : 


var map, measureControls; 
function init()( 
map = new OpenLayers. Map( 'map') ; 
var wmsLayer = new OpenLayers. Layer. WMS( "OpenLayersWMS", 
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"http://vmap0. tiles. osgeo. org/wms/vmap0?", (layers: 'basic']); 
map. addLayers([wmsLayer]) ; 
map. addControl(new OpenLayers. Control. LayerSwitcher()) ; 
map. addControl(new OpenLayers. Control. MousePosition()) ; 
map. setCenter(new OpenLayers. LonLat(0, 0), 3); 
document. getElementById( noneToggle').checked = true; 


(2) 添加 测量 方式 : 


measureControls = 
{ 
line: new OpenLayers. Control. Measure( 
OpenLayers. Handler. Path, { 
persist: true, 
handlerOptions: { 
layerOptions: { 
renderers: renderer, 
styleMap: styleMap 
} 


} 
)» 
polygon: new OpenLayers. Control.Measure( 
OpenLayers. Handler. Polygon, { 
persist: true, 
handlerOptions: { 
layerOptions: { 
renderers: renderer, 
styleMap: styleMap 


i 


6.4.8 样式 特点 


前 面 已 经 详细 讲解 了 如 何 创建 矢量 图 层 , 一 旦 创建 了 矢量 图 层 , 如 果 要 添加 新 的 要 素 或 
修改 现 有 的 图 层 , 所 面 对 的 问题 就 是 修改 图 层 样式 。 

要 素 的 可 视 化 表示 形式 ,是 地 理 信息 系统 中 最 重要 的 概念 之 一 。 从 用 户 的 经 验 或 设计 
师 的 角度 来 看 , 它 很 重要 。 

可 视 化 要 素 的 形式 很 重要 ,可 以 使 应 用 程序 更 有 吸引 力 。 例 如 ,设置 热点 ,如 果 对 某 区 
域 有 兴趣 ,可 以 用 不 同 的 半径 和 颜色 值 来 表示 。 例 如 ,用 小 半径 和 浅 蓝 色 的 圆 表 示 一 个 冷 
区 ,用 大 半径 和 红色 的 圆 表示 热 区 。 
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OpenLayers 具有 很 好 的 灵活 性 来 展现 要 素 , 但 最 初 使 用 的 时 候 有 点 复杂 , 例如 
symbolizers,StyleMap 等 。 

相关 模块 要 素 类 比较 多 ,这 里 首先 介绍 各 个 关键 类 在 样式 泻 染 环节 中 的 作用 和 要 素 。 

1. 使 用 symbolizers 样式 特征 

创建 一 个 小 的 地 图 编辑 器 来 学 习 使 用 样式 要 素 的 基本 形式 ,允许 通过 指定 某 些 少数 样 
式 属 性 增加 新 的 要 素 , 如 图 6. 4-31 所 示 。 


图 6.4-31 使 用 symbolizers 样式 特征 


每 个 OpenLayers. Feature. Vector 实例 可 以 有 一 个 与 之 关联 的 样式 。 这 种 风格 称 为 
symbolizer, 这 是 一 个 JavaScript 对 象 的 某 些 字段 指定 填充 颜色 .边界 等 ,例如 ， 


{ 
fillColor: "i ee9900", 
fillOpacity: 0.4, 
strokeColor: "itee9900", 
strokeOpacity: 1, 
strokeWidth : 1 

) 


在 这 些 代码 中 ,每 次 都 有 一 个 要 素 被 添加 到 地 图 中 ,填写 代码 并 控制 笔触 属性 ,创建 一 
个 新 的 symbolizer HF 。 

源 代码 有 两 个 主要 部 分 : 一 个 用 于 HTML; 第 二 个 用 于 JavaScript 代码 。 

(1) 建立 包括 OpenLayers 的 HTML 文件 后 ( 见 Gettingreadysection 的 HTML 代码 )， 
在 Div 元 素 中 创建 地 图 ,样式 文件 由 ch07_using_symbolizersand 添加 一 个 基础 层 ; 

var map = new OpenLayers.Map("ch07 using symbolizers"); 

var osm = new OpenLayers. Layer. OSM() ; 


map. addLayer(osm) ; 
map. setCenter(new OpenLayers. LonLat(0,0), 3) 
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(2) 添加 一 个 矢量 图 层 : 


var vectorLayer = new OpenLayers. Layer. Vector("Features") ; 
vectorLayer. events. register( 'beforefeatureadded', vectorLayer, setFeatureStyle) ; 
map. addLayer(vectorLayer); 


(3) 添加 新 的 OpenLayers. Control. EditingToolbar 控件 功能 到 一 个 矢量 层 : 


var editingControl = new OpenLayers. Control. EditingToolbar(vectorLayer); 
map. addControl(editingControl); 


(4) 添加 实施 的 代码 ,来 获取 样式 应 用 到 的 新 功能 : 


function setFeatureStyle(event) { 
var fillColor = dijit.byId('fillColor').get( value'); 
var fillOpacity = dijit.byId('fillOpacity').get('value')/100; 
var strokeColor = dijit.byId('strokeColor').get('value'); 
var strokeWidth = dijit.byId('strokeWidth ').get( value'); 
var strokeOpacity = dijit.bylId('strokeOpacity').get( value')/100; 
var pointRadius = dijit.byId('pointRadius').get( value'); 
var style = OpenLayers. Util. extend( ( ) , OpenLayers. Feature. Vector. style[ 'default']); 
style.fillColor - fillColor; 
style. fillOpacity = fillOpacity; 
style. strokeColor strokeColor; 
style. strokeWidth = strokeWidth ; 
style. strokeOpacity = strokeOpacity; 
style. pointRadius = pointRadius; 


event. feature. style = style; 


} 


2. 使 用 StyleMap 并 更 换 要 素 的 属性 改变 风格 

有 两 种 方法 来 改变 样式 特征 : 第 一 种 方法 是 应 用 symbolizer 直接 散 列 到 该 要 素 ( 请 参 
阅 使 用 symbolizers 样式 特征 ); 第 二 个 方法 是 应 用 样式 的 图 层 使 每 一 个 要 素 改 变 风 格 。 

第 二 个 方法 是 在 许多 情况 下 的 首选 方式 。 它 是 一 种 通用 的 方法 ,通过 设置 所 有 的 样式 
来 改变 样式 和 规则 的 层 特 征 。 

下 面 展示 如 何 使 用 StyleMap ,并 展示 如 何 修改 所 有 样式 层 ,而 不 是 修改 每 一 个 样式 属 
性 。 这 个 实例 的 输出 类 似 于 下 面 的 截图 ,如 图 6. 4-32 所 示 。 

此 外 ,该 技术 使 开发 者 能 够 使 用 要 素 的 属性 来 选择 半径 和 颜色 ,将 它们 动态 地 创建 在 
一 起 。 

(1) 建立 包括 OpenLayers 的 依赖 HTML 文件 后 ( 见 Gettingreadysection ff] HTML 代 
码 ), 在 Div 元 素 中 创建 地 图 : 


«div id- "ch07 styleMap" style="width : 100% ; height: 95 % ;"></div> 
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图 6. 4-32 ”样式 修改 


(2) 创建 地 图 实例 ,并 添加 一 个 基础 层 : 


var map = new OpenLayers.Map("ch07 styleMap"); 
var osm = new OpenLayers. Layer. OSM() ; 

nap. addLayer(osn) ; 

map. setCenter(new OpenLayers. LonLat(0,0), 2) 


(3) 为 全 层 定义 样式 ,首先 为 点 要 素 创建 一 个 调 色 板 : 


// 创建 stylemap 图 层 
var colors = ['# EBC137', ' # E38C2D', '# DB4C2C', '#771E10', '#48110C']; 


(4) 从 以 前 的 symbolizer 散 列 创建 一 个 样式 实例 : 


var style = OpenLayers. Util. extend({}, OpenLayers. Feature. Vector. style["default"]); 
style. pointRadius = " $ {radius}"; 
style. fillColor = '$ {colorFunction ]'; 
var defaultStyle = new OpenLayers. Style(style, { 

context: { 

colorFunction : function (feature) { 
return colors[ feature. attributes. temp]; 
} 

} 

n 


(5) 创建 应 用 所 需 的 StyleMap REE: 


// 创建 矢量 层 

Var vectorLayer = new OpenLayers. Layer. Vector("Features", { 
styleMap: new OpenLayers. StyleMap(defaultStyle) 

n; 
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map. addLayer(vectorLayer); 


(6) 创建 一 些 随机 点 ,每 项 要 素 都 有 两 个 属性 radius 和 temp 随机 值 : 
// 创建 随机 的 要 素 点 


var pointFeatures = []; 
for(var i=0; i«150; i++) { 


} 


var px = Math. random() * 360 - 180; 

var py = Math. random() * 170 - 85; 

// 创建 一 个 lonlat 实例 ,并 把 它 转换 为 地 图 投影 

var lonlat = new OpenLayers. LonLat(px, py); 

lonlat. transform(new OpenLayers. Projection("EPSG:4326"), new OpenLayers. Projection 
("EPSG:900913")); 

var pointGeometry = new OpenLayers. Geometry. Point(lonlat. lon, lonlat. lat); 

var pointFeature = new OpenLayers. Feature. Vector(pointGeometry); 

// 添加 随机 属性 

var radius = Math.round(Math.random() * 15 + 4); 

var temp = Math.round(Math.randon() * 4); 

pointFeature.attributes.radius - radius; 

pointFeature.attributes.temp - temp; 

pointFeatures. push(pointFeature); 


vectorLayer. addFeatures(pointFeatures) ; 

3. 应 用 StyleMap 和 演 染 目的 

有 一 些 控件 (如 SeleetFeature, ModifyFeature 或 EditingToolbar) 能 够 根据 其 当前 状态 
改变 要 素 的 风格 。 如 何 管理 OpenLayers 呢 ? 答案 是 通过 浑 染 来 实现 ,如 图 6. 4-33 Bron 。 


图 6.4-33 泻 染 实现 


这 个 实例 显示 如 何 修改 ,并 用 于 每 个 样式 泻 染 来 改变 样式 属性 。 这 样 ,将 采用 蓝 色 而 不 
是 橙色 来 绘制 地 图 要 素 。 和 暂时 的 要 素 使 用 绿色 绘制 , 选 定 的 要 素 使 用 橙色 绘制 。 
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(1) 创建 一 个 新 的 HTML 文件 ,并 添加 OpenLayers 的 依赖 关系 。 第 一 个 步骤 是 添加 
Div 元 素 创建 地 图 实例 : 


«div id- "ch07 rendering intents" style="width : 100 $ ; height: 95 $ ;"></div> 


(2) 在 JavaScript 部 分 ,初始 化 地 图 实例 ,添加 基础 层 和 中 心 视窗 : 


var map = new OpenLayers.Map("ch07 rendering intents"); 


var osm = new OpenLayers. Layer. OSM() ; 
map. addLayer(osm) ; 


G) 创建 三 个 不 同 的 风格 : 


var defaultStyle = new OpenLayers. Style(( 


n»; 


fillColor: "i 336699", 
fillOpacity: 0.4, 
hoverFillColor: "white", 
hoverFillOpacity: 0.8, 
strokeColor: "#003366", 
strokeOpacity: 0.8, 
strokeWidth : 2, 
strokeLinecap: "round", 
strokeDashstyle: "solid", 
hoverStrokeColor: "red", 
hoverStrokeOpacity: 1, 
hoverStrokeWidth : 0.2, 
pointRadius: 6, 
hoverPointRadius: 1, 
hoverPointUnit: "%", 
pointerEvents: "visiblePainted", 
cursor: "inherit" 


var selectStyle = new OpenLayers. Style( { 


fillColor: "#ffcc00", 
fillOpacity: 0.4, 
hoverFillColor: "white", 
hoverFillOpacity: 0.6, 
strokeColor: "itff9900", 
strokeOpacity: 0.6, 
strokeWidth : 2, 
strokeLinecap: "round", 
strokeDashstyle: "solid", 
hoverStrokeColor: "red", 
hoverStrokeOpacity: 1, 
hoverStrokeWidth : 0.2, 
pointRadius: 6, 
hoverPointRadius: 1, 
hoverPointUnit: "€", 
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pointerEvents: "visiblePainted", 
cursor: "pointer" 

n; 

var temporaryStyle = new OpenLayers. Style({ 
fillColor: " #587058", 
fillOpacity: 0.4, 
hoverFillColor: "white", 
hoverFillOpacity: 0.8, 
strokeColor: " #587498", 
strokeOpacity: 0.8, 
strokeLinecap: "round", 
strokeWidth : 2, 
strokeDashstyle: "solid", 
hoverStrokeColor: "red", 
hoverStrokeOpacity: 1, 
hoverStrokeWidth : 0.2, 
pointRadius: 6, 
hoverPointRadius: 1, 
hoverPointUnit: "%", 
pointerEvents: "visiblePainted", 
cursor: "inherit" 


Dp 
(A) 创建 一 个 StyleMap 实例 来 保存 三 种 风格 不 同 的 泻 染 : 


var styleMap = new OpenLayers.StyleMap({ 
'default': defaultStyle, 
'select': selectStyle, 
'temporary': temporaryStyle 
DE 


(5) 创建 矢量 层 StyleMapinstance: 


// 创建 使 用 定义 的 StyleMap 矢量 图 层 

var vectorLayer = new OpenLayers. Layer. Vector("Features", { 
styleMap: styleMap 

ni 

map. addLayer(vectorLayer); 


(6) 将 一 些 控件 添加 到 地 图 : 


// 添加 控件 

var editingControl = new OpenLayers. Control. EditingToolbar(vectorLayer) ; 

var modifyControl = new OpenLayers. Control.ModifyFeature(vectorlayer, { 
toggle: true 

n; 

editingControl. addControls([modifyControl]) ; 

map. addControl(editingControl); 
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6.4.9 OpenLayers 数据 表现 


1. 空间 数据 的 组 织 与 实现 

提 到 数据 ,首先 思考 几 个 问题 : GIS 核心 是 什么 ? 是 数据 平台、 服务 .空间 数据 的 特 
征 表达 方式 ,还 是 地 理 数据 的 模型 (结构 )? 

OpenLayers 空间 数据 的 实现 主要 存在 OpenLayers. Geometry 类 及 其 子 类 中 。 图 6. 4-34 
描述 了 这 些 类 的 继承 关系 ,从 图 中 可 以 清楚 地 看 出 , MultiPoint, Polygon 和 MultiLineString 这 
三 个 类 实现 了 多 重 继 承 , 既 直 接 继 承 于 Geometry 类 ,又 继承 于 Collection 类 。 


Geometry 
Point Collection Rectangle Surface 
[ | 

MultiPoint Polygon | MutilLineString MultiPolygon 

4 

Cue 

i 
LineString 

i MultiPoint Polygon MutilLineString 
LinearRring 


图 6.4-34 空间 数据 的 组 织 关 系 


OpenLayers 对 于 Geometry 对 象 的 组 织 是 : 最 基础 的 就 是 点 ; MultiPoint 由 点 构成 , 继 
承 自 Openlayers. Geometry. Collection; LinearRing; LineString 均 由 Point 构成 。 

Polygon 由 OpenLayers. Geometry. LinearRing 构成 。OpenLayers 在 解析 数据 时 候 ， 
将 所 有 的 面 、 线 包含 的 点 全 部 都 对 象 化 为 Openlayers. Geometry. Point。 有 人 曾经 测试 过 这 
里 面 存在 问题 : 解析 矢量 数据 非常 慢 , 在 点 数 多 的 情况 下 甚至 会 使 浏览 器 “崩溃 ”"。 原 因 是 : 
OpenLyers 在 解析 数据 时 候 , 将 所 有 的 面 、 线 包含 的 点 全 部 都 对 象 化 为 点 对 象 , 并 首先 将 所 
有 的 对 象 读 取 到 内 存 , 得 到 一 个 Feature 的 集合 .然后 将 这 个 集合 提交 给 泻 染 器 进行 泻 染 。 
这 样 泻 染 速度 当然 就 慢 了 。 为 什么 这 样 ,可 能 是 由 于 OpenLayers 项 目 本 身 在 标准 和 框架 
结构 上 做 得 比较 好 ,但 更 具体 的 东西 还 得 优化 。 

下 面 以 Point 和 Collection 为 例 来 说 明 其 内 部 实现 过 程 ,首先 来 看 Point, 

一 个 点 就 是 一 个 坐标 对 (x,y) , 它 有 两 个 属性 : x 和 y. YE point 类 里 ,提供 了 六 个 成 员 
函数 : clone,distanceTo,equals,move,rotate 和 resize。 下 面 看 看 计算 两 点 距离 的 函数 : 
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distanceTo: function (point) { 
var distance - 0.0; 
if ( (this.x != null) && (this.y != null) &&(point !- null) && (point.x != null) 
&& (point.y != null) )( 
var dx2 = Math. pow(this.x 一 point.x, 2); 
var dy2 = Math. pow(this.y — point.y, 2); 
distance = Math. sqrt( dx2 + dy2 ); 
} 


return distance; 


} 


在 collection 集合 对 象 中 ,可 以 存放 同一 类 型 的 地 理 对 象 ,也 可 以 存放 不 同 的 地 理 对 象 。 
定义 一 个 属性 component, 以 数组 对 象 的 形式 存储 组 成 collection 对 象 的 “组 件 ”。 一 个 获取 
集合 大 小 的 函数 getLength 如 下 : 

getLength : function () { 

var length - 0.0; 

for (var i = 0; i«this.components.length ; i++) ( 
length += this.components[i].getLength (); 

} 


return length ; 
) 


细心 的 读者 可 能 会 发 现 , 每 一 个 基 类 都 有 一 个 destroy 函数 。 它 是 OpenLayers 实现 的 
垃圾 回收 机 制 , 以 防止 内 存 泄露 ,优化 性 能 : 


/ * APIMeth od: destroy 

* Destroythisgeometry. 

*/ 

destroy: function () { 
this. components. length = 0; 
this. components = null; 


} 

2. 数据 解析 一 一 以 GML 为 例 

前 面 提 到 过 , OpenLayers 设计 是 符合 标准 的 ,有 良好 的 框架 结构 和 实现 机 制 。 
OpenLayers 支持 的 格式 比较 多 ,有 XML,GML,GeoJSON,GeoRSS,JSON,KML,WFS 等 。 
这 里 主要 以 GML 为 例 ,来 看 OpenLayers 数据 的 解析 过 程 。 

GML (Geography Markup Language) 即 地 理 标 识 语言 . 它 由 OGC( 开 放 式 地 理 信息 系 
统 协会 ) 于 1999 年 提出 ,目前 的 版 本 是 3.0。GML 是 XML 在 地 理 空间 信息 领域 的 应 用 。 
利用 GML 可 以 存储 和 发 布 各 种 特征 的 地 理 信息 ,并 控制 地 理 信息 在 Web 浏览 器 中 的 显 
示 。 地 理 空 间 互 联网 络 作为 全 球 信息 基 础 架构 的 一 部 分 ,已 成 为 Internet. 上 技术 追踪 的 热 
点 。 许 多 公司 和 相关 研究 机 构 通过 Web 将 众多 的 地 理 信息 源 集成 在 一 起 ,向 用 户 提供 各 种 
层次 的 应 用 服务 ,同时 支持 本 地 数据 的 开发 和 管理 。GML 可 以 在 地 理 空间 的 Web 领域 完 


第 6 章  OpenGIS 


成 同样 的 任务 ,GML 技术 的 出 现 是 地 理 空间 数据 管理 方法 的 一 次 飞跃 。 

从 总 体 上 来 说 ,OpenLayers 对 于 GML 数据 的 解析 过 程 是 : 首先 通过 调用 得 到 GML 
文本 数据 ,然后 通过 Formate. GML 类 的 read 方法 来 解析 这 个 文本 ,解析 得 到 Geometry 对 
象 ,然后 用 相应 的 泻 染 器 画 出 Geometry 对象。 其实, 解析 得 到 还 是 基本 的 Point, 
LineString 之 类 的 Geometry 对 象 ,就 是 在 地 图 上 看 到 的 内 容 。 

下 面 看 看 其 实现 过 程 : 


//read( ) 函数 读 取 数据 ,获取 特征 列表 
read: function (data) { 
if(typeofdata == "String ") { 
data = OpenLayers. Format. XML. prototype. read. apply(this, [data]); 
} 
var featureNodes = 
this. getElementsByTagNameNS(data. documentElement, this. gmlns, 
this. featureName) ; 
var features = []; 
for(var i=0; i<featureNodes. length ; i++) { 
var feature = this. parseFeature(featureNodes[ i]); 
if(feature) { 
features. push( feature) ; 
} 
} 
return features; 


) 


函数 parseFeatureO J& OpenLayers 中 GML 数据 格式 解析 的 核心 ,就 是 它 创建 地 理 对 
象 及 其 属性 。 实 际 上 ,每 一 个 Format 子 类 都 实现 了 这 个 成 员 函 数 ,完成 类 似 的 功能 。 


parseFeature: function (node) { 
var order = ["MultiPolygon", "Polygon", 
"MultiLineString ", "LineString ", 
"MultiPoint", "Point"]; 
var type, nodeList, geometry, parser; 
for(var i-0; i<order. length ; ++i) { 
type = order[ i]; 
nodeList = this.getElementsByTagNameNS(node, this.gnlns, type); 
if(nodeList. length» 0) { 
var parser = this. parseGeometry[ type. toLowerCase()]; 
if(parser) { 
geometry = parser.apply(this, [nodeList[0]]); 
} else { 
OpenLayers. Console. error("Unsupportedgeometrytype: " + type); 
} 
break; 
} 
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if(this.extractAttributes) { 
attributes = this.parseAttributes(node); 
} 
var feature = new OpenLayers. Feature. Vector(geometry, attributes) ; 
var childNode = node. firstChild; 
var fid; 
while(childNode) { 
if(childNode. nodeType == 1) { 
fid = childNode. getAttribute("fid") || childNode. getAttribute("id") ; 
if(fid) { 
break; 
) 
} 
childNode = childNode. nextSibling; 
} 
feature. fid = fid; 
return feature; 


} 

结合 前 面 的 “OpenLayers 空间 数据 的 组 织 ”, 可 以 看 到 OpenLayers 在 解析 获取 GML 
数据 的 时 候 ( 比 如 涉及 到 面 、 线 的 时 候 ) ,总 是 以 点 为 基础 构建 。 有 人 曾经 做 过 测试 : 直接 用 
SVG 夯 出 来 ,性 能 上 会 好 很 多 。 

3. 数据 泻 染 分 析 

实际 上 ,OpenLayers 的 整个 表现 过 程 是 这 样 的 : 通过 调用 获取 数据 ,然后 各 种 格式 的 
解析 器 解析 数据 ,使 用 泻 染 器 泻 染 后 加 到 图 层 上 ,最 后 再 结合 相应 的 控件 表现 出 来 ,成 为 一 
幅 “ 动 态 ” 的 地 图 。 

这 里 主要 讨论 OpenLayers. Renderer 类 及 其 子 类 。 

Renderer 类 提供 了 一 些 虚 方法 ,以 供 其 子 类 继承 , 像 setExtent、 drawFeature、 
drawGeometry ,eraseFeatures ,eraseGeometry 等 。 

Elements 继承 Renderer, 具体 实现 浑 染 的 类 又 继承 Renderer 类 。 之 所 以 这 样 设 计 ， 
是 因为 不 同 的 矢量 格式 数据 需要 共享 相应 的 函数 ,在 Elements 这 个 类 中 封装 。 这 个 类 
的 核心 是 drawGeometry 和 drawGeometryNode 两 个 函数 。 其 中 drawGeometry 调用 了 
drawGeometryNode, 创 建 出 基本 的 地 理 对 象 。 


drawGeometry: function (geometry, style, featureld) ( 
var className - geometry.CLASS NAME; 
if ((className == "OpenLayers. Geometry. Collection") || 
(className -- "OpenLayers.Geometry.MultiPoint") || 
(className -- "OpenLayers.Geometry.MultiLineString ") || 
(className == "OpenLayers.Geometry.MultiPolygon"))( 
for (var i = 0; i<geometry. components. length ; i++){ 
this. drawGeometry(geometry. components[i], style, featureld); 
} 
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return ; 
h 
var nodeType = this. getNodeType(geometry) ; 
var node = this.nodeFactory(geometry. id, nodeType, geometry) ; 
node. featureld = featureld; 
node. geometryClass - geometry.CLASS NAME; 
node. style - style; 
this. root. appendChild(node); 
this.drawGeometryNode(node, geonetry); 
} 


演 染 器 的 继承 关系 如 图 6. 4-35 所 示 。 


OpenLayers.Renderer 


i 
OpenLayers.Renderer.Elements 
i 
| OpenLayers.Renderer.SVG OpenLayers.Renderer.VML 


图 6.4-35 泻 染 器 的 继承 关系 图 


实现 泻 染 的 具体 方法 是 在 OpenLayers. Renderer. SVG 和 OpenLayers. Renderer. 
VML 两 个 类 中 实现 ,也 就 是 实现 Elements 提供 的 虚 方法 ,比如 drawPoint drawCircle, 
drawLineString .drawLinearRing , drawLine,drawPolygon,drawSurface 等 。 下 面 以 drawCircle 
为 例 , 看 看 具体 实现 过 程 : 
drawCircle: function (node, geometry, radius) ( 
if(! isNaN( geometry. x)&& ! isNaN(geonetry. y) ) { 
var resolution = this. getResolution(); 
node. style. left = (geometry.x /resolution).toFixed() — radius; 
node. style. top = (geometry. y /resolution).toFixed() - radius; 
var diameter = radius * 2; 
node. style. width = diameter; 
node. style. height = diameter; 


} 


4. 体系 结构 

一 般 来 说 ,了 解 一 个 事物 ,先是 从 轮廓 去 认识 ,然后 再 从 内 部 去 探究 。 同 样 ,软件 开发 的 
过 程 (比如 OpenLayers) ,先是 在 文档 中 设计 它 的 框架 体系 ,有 个 总 体 的 结构 ,然后 是 各 个 模 
块 的 设计 ,再 下 来 就 是 具体 编写 代码 。 如 果 要 分 析 一 个 做 好 的 项 目 ,恰恰 与 此 步骤 相反 一 一 
要 从 具体 的 代码 中 分 析 总 结 出 系统 框架 。 

图 6. 4-36 把 OpenLayers 的 体系 结构 勾勒 出 来 了 ,也 就 是 我 们 所 看 到 的 浏览 器 上 地 图 
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的 内 部 抽象 表示 。 图 上 最 底层 的 是 OpenLayers 的 数据 源 Image,GML 等 ,实际 上 它们 都 是 
OpenLayers. Layer 的 子 类 。 这 些 数据 经 过 泻 染 器 OpenLayers. Renderer 演 染 ,显示 在 地 图 
的 图 层 Layer 上 。 把 整个 地 图 看 作 一 个 容器 ,这 个 地 图 容器 中 还 有 一 些 特别 的 层 、 控 件 等 。 


此 外 ,还 有 绑 定 在 Map 和 Layer 上 的 一 系列 的 待 请 求 的 事件 。 


Controls 


Map Layers 


Markers 


Events 


| 


Handler 


| OpenLayers.Renderer | 


Image GML WMS a WFS 


图 6.4-36 OpenLayers 体系 结构 图 


WebGIS 项 目 实 践 篇 


本 篇 通过 两 个 典型 案例 来 帮助 读者 快速 动手 ,开始 WebGIS 项 目 开 
发 实践 。 第 7 章 通 过 电力 管线 WebGIS 系统 整体 设计 .数据库 设计 、 系 统 
实现 以 及 系统 发 布 几 个 方面 来 介绍 WebGIS 开发 的 各 个 环节 。 第 8 章 通 
过 交通 WebGIS 系统 采用 同样 的 开发 流程 进行 开发 ,所 不 同 的 是 加 入 了 
移动 客户 端的 开发 ,将 WebGIS 和 移动 GIS 完美 结合 起 来 。 


城市 地 下 电力 管线 GIS 系统 


7.1 系统 概述 


7.1.1 开发 背景 


随 着 能 源 产业 结构 的 调整 ,电力 已 经 成 为 国民 生活 中 最 重要 的 能 源 。 一 个 完整 的 电力 
系统 包括 各 个 环节 ,其 中 电网 是 电力 系统 中 的 命脉 。 电 网 像 人 体 中 的 血液 循环 系统 一 样 将 
发 电 设备 生产 的 电能 送 到 用 户 端 ,使 用 户 能 够 使 用 安全 清洁 的 能 源 。 随 着 城市 建设 的 快速 
发 展 ,城市 电网 设施 逐步 转 到 地 下 建设 ,电力 管线 数量 逐年 增加 。 与 架空 线 相 比 , 地 下 电力 
管线 基本 不 占用 地 面 空间 ,发生 人 身 伤 害 的 概率 小 ,可 避免 天 气 和 环境 因素 造成 的 短路 和 接 
地 故障 ,可 以 提高 配 电 可 靠 性 和 电能 稳定 性 。 城 市 地 下 电力 管线 的 建设 是 衡量 城市 硬件 设 
施 完善 程度 的 重要 标志 ,也 是 城市 长 远 发 展 的 重要 保障 。2013 年 9 月 16 日 国务 院 出 台 《 国 
务 院 关于 加 强 城 市 基础 设施 建设 的 意见 》, 这 是 改革 开放 以 来 首次 以 国务 院 的 名 义 就 城市 基 
础 设施 建设 发 布 文件 。 其 中 ,在 (意见 ) 的 第 二 点 “加 大 城市 管 网 建设 和 改造 力度 ”中 ,明确 指 
出 要 加 大 城市 电力 管线 的 建设 和 管理 。 

由 于 管理 手段 的 落后 ,城市 地 下 电力 管 网 建设 存在 规划 混乱 和 重复 施工 的 问题 ,造成 了 公 
共 资 源 的 极 大 浪费 , 另 一 方面 ,供电 部 门 长 期 存在 “重建 设 轻 管 理 ” 的 意识 ,使 得 地 下 电力 管线 
的 管理 工作 也 不 能 及 时 到 位 。 目 前 的 电力 管线 管理 手段 跟 不 上 电力 社会 发 展 的 需求 ,电力 管 
网 的 管理 问题 日 益 突 出 。 我 国 地 下 电力 管线 管理 大 多 依赖 从 业 人 员 的 经 验 和 对 电缆 网 络 的 熟 
悉 程度 ,人 员 的 专业 素质 直接 关系 到 地 下 电力 管 网 管理 水 平 。 电 力 管 线 现 有 线路 的 资料 大 多 
残缺 不 全 , 且 有 关 资 料 精度 不 高 甚至 与 现状 不 符 。 据 调查 显示 ,截止 到 2013 年 ,我 国有 逾 60% 
的 城市 尚未 进行 地 下 管线 的 普查 。 此 外 ,大 部 分 供电 单位 的 现 有 电缆 资料 以 文件 形式 由 人 工 
方式 管理 ,容易 损坏 .丢失 ,资料 准确 率 低 , 效 率 低 ,不 能 实时 为 电力 管线 的 规划 管理 提供 决策 
支持 。 由 于 不 能 准确 掌握 电力 管线 的 位 置 .深度 等 相关 资料 ,涉及 路 面 开 控 的 道路 和 建筑 施 
工时 ,施工 单位 盲目 开 挖 造成 的 事故 屡见不鲜 。 因 此 ,在 进行 城市 规划 、 设 计 、 施 工 和 管理 工 
作 中 ,如 果 没 有 完整 准确 的 城市 地 下 电力 管线 信息 ,就 会 变 成 “瞎子 ”, 到 处 碰 辟 ,寸步难行 ， 
甚至 造成 重大 的 损失 。 随 着 计算 机 技术 的 发 展 . 采 用 先进 技术 和 管理 手段 提高 地 下 电力 管 
线 的 管理 水 平 ,满足 决策 ,管理 部 门 和 施工 单位 的 需要 ,已 经 成 为 电力 行业 十 分 紧迫 的 任务 。 

本 章 针对 国内 城市 地 下 电力 管线 GIS 管理 系统 的 现状 ,在 分 析 需 求 的 基础 上 设计 系统 
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的 功能 模块 。 本 系统 采用 J2EE 框架 技术 ,以 桐乡 市 1 : 1000 城市 地 图 作为 系统 背景 图 层 ， 
通过 PostgreSQL 数据 库 和 空间 数据 管理 插件 PostGIS 管理 系统 的 属性 和 空间 数据 ,采用 
开源 架构 的 Geoserver 十 OpenLayers 作为 GIS 功能 的 开发 平台 ,并 且 使 用 SSH 框架 实现 系 
统 的 业务 逻辑 功能 。 系 统 将 GIS 技术 和 空间 数据 建 模 技术 引入 城市 地 下 电力 管线 管理 和 
分 析 中 ,根据 系统 特点 ,建立 属性 数据 库 和 空间 数据 库 管理 模型 ,设计 并 开发 了 轨迹 图 、 工 井 
立 视 图 .单线 图 和 接线 图 等 具有 电力 行业 特色 的 地 下 电力 管线 的 管理 功能 模块 ,实现 了 地 下 
电力 管线 数据 的 信息 化 和 可 视 化 。 


7.1.2 需求 分 析 


基于 WebGIS 的 城市 地 下 电力 管线 管理 系统 需要 满足 电力 行业 对 城市 地 下 电力 管线 
的 存储 、 显 示 管理 ,分 析 等 功能 ,具体 需求 如 下 : 

CD 提供 方便 、 灵 活 的 地 图 操作 。 支 撑 Web 矢量 图 形 及 栅 格 图 形 的 发 布 和 Web 地 图 
操作 ,包括 地 图 的 缩放 、 漫 游 座 眼 , 地 图 局 部 显示 ,地理 定 位 ,线路 量 算 等 功能 。 提 供 符合 国 
内 电力 行业 规范 的 电力 管线 设施 符号 系统 。 

(2) 提供 电力 管线 设备 管理 ,包括 配 电 设施 .电力 管线 的 台 账 管理 以 及 有 关 设 备 的 相关 
图 片 和 施工 附件 管理 功能 .设备 的 分 层 控制 . 配 电 设备 一 次 接线 图 等 资料 ,工作 人 员 可 以 快 
速 查询 所 需 资料 。 

(3) 提供 地 图 数据 和 属性 数据 的 一 体 化 管理 ,通过 属性 资料 可 以 在 地 图 上 查询 其 位 置 ， 
同时 可 由 地 图 数据 查询 出 相应 的 属性 资料 ,方便 工作 人 员 查 询 。 

CA) 提供 城市 地 下 电力 管线 的 分 析 模 块 、 配 电线 路 的 单线 图 绘制 与 编辑 功能 、 空 间 定位 
分 析 , 管 网 拓扑 等 功能 。 

(5) 提供 地 下 电力 管道 工 井 剖面 图 编辑 和 维护 功能 ,实现 电力 管线 与 管道 的 关联 操作 ， 
将 电缆 与 管道 的 孔 位 关联 功能 ,实现 工 井 内 电缆 关系 的 可 视 化 。 

(6) 提供 用 户 权限 管理 ,具有 特定 权限 的 用 户 才 能 编辑 相关 图 形 。 实 现 电 力 管线 数据 
批量 导入 功能 以 及 导出 图 片 文件 和 打印 机 制图 输出 。 

总 之 ,该 系统 应 具备 以 下 特征 和 功能 : 网 页 端 GIS 界面 ,服务 器 端 和 数据 库 服务 器 ,能 
够 支持 海量 空间 数据 的 发 布 ,支持 常用 栅 格 、 矢 量 地 图 的 读 取 、 可 视 化 ,通过 WMS、WFS 访 
问 支 持 开放 标准 的 地 理 空间 信息 资源 ,具备 电力 管线 的 一 般 空间 分 析 功 能 。 并 且 该 系统 具 
备 基础 性 ,扩展 性 、 独 立 性 。 基 础 性 指 的 是 系统 具备 基础 的 GIS 平台 的 支撑 能 力 ,能 够 处 理 
基本 的 GIS 操作 且 工 作 稳定 。 扩 展 性 是 指 可 以 对 系统 进行 更 加 深入 的 开发 和 功能 扩展 ,能 
够 支持 电力 行业 的 特殊 需求 ,使 其 具备 行业 特色 。 独 立 性 是 指 系 统 不 依赖 特定 的 商用 GIS 
平台 和 软件 ,避免 产生 昂贵 的 系统 运行 费用 。 


7.1.3 可行 性 分 析 


利用 开源 GIS 系统 可 以 避免 开发 人 员 一 切 从 零 开 始 研 发 的 巨大 成 本 ,并 且 开 源 GIS 的 
开发 性 可 以 保证 开发 的 系统 的 扩展 性 和 灵活 性 ,使 其 可 以 与 电力 管线 的 需求 相 融 合 。 
WebGIS 的 地 下 电力 管线 管理 系统 的 网 页 端的 GIS 功能 开发 基于 OpenLayers 框架 ,服务 
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器 端 使 用 GeoServer 地 图 服务 器 ,系统 属性 数据 使 用 PostgreSQL 数据 库存 储 , 空 间 数据 存 
储 使 用 PostGIS 工具 ,在 技术 层面 上 是 可 行 的 。 

利用 开源 GIS 系统 开发 只 需 遵 循 相关 的 许可 协议 ,无 需 负 担 商业 软件 昂贵 的 许可 费用 。 
另外 ,系统 是 基于 B/S 模式 的 Web 系统 ,电力 管 网 管理 人 员 使 用 免费 的 Web 浏览 器 进行 浏览 
和 操作 ,不 需要 安装 客户 端 以 及 任何 软件 ,从 而 使 终端 用 户 的 维护 费用 降低 至 零 。 因 此 ,以 开 
源 软件 为 基础 的 城市 电力 管线 管理 系统 带 来 的 经 济 效益 是 显而易见 的 ,在 经 济 层面 上 是 可 行 的 。 

城市 地 下 电力 管线 GIS 系统 可 以 提高 电力 系统 管理 效率 、 提 高 排出 故障 的 速度 .降低 
甚至 消除 电力 故障 隐患 ,为 电力 系统 间接 创造 经 济 效益 。 用 户 通过 本 系统 可 以 及 时 、 快 速 、 
简便 地 获取 分 析 和 决策 所 需要 的 关键 信息 ,缩短 分 析 和 决策 所 需 的 时 间 ,减少 人 力 资源 消 
耗 ,实现 高 效率 、 低 成 本 的 电力 管线 的 管理 。 通 过 本 系统 的 应 用 ,可 以 更 加 科学 地 规划 管道 
建设 ,减少 城市 道路 的 “拉链 "效应 ,避免 地 下 管道 的 重复 建设 ,有 效 地 利用 现 有 的 管道 ,从 而 
创造 良好 的 社会 效益 。 因 此 ,在 社会 效益 层面 也 是 可 行 的 。 


7.2 系统 整体 设计 


城市 地 下 电力 管线 管理 系统 是 一 个 基于 B/S 架构 的 应 用 系统 。 系 统 的 网 络 拓扑 结构 
如 图 7. 2-1 AS. KIA Apache 公司 的 Tomcat 服务 器 作为 Web 服务 器 ,采用 开源 的 


C] NS 


数据 服务 器 
PostgreSQL+ 文 件 GIS 服 务 器 


Geoserver 


图 7.2-1 网 络 拓扑 结构 图 
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PostgreSQL 数据 库 以 及 文件 系统 作为 数据 服务 器 。 另 外 ,使 用 GeoServer 作为 GIS 服务 
器 ,提供 符合 OpenGIS 规定 的 WES, WMS 等 协议 的 GIS 服务 。 

遵循 MVC 的 分 层 设 计 思 想 ,系统 整体 上 分 为 数据 层 . 应 用 逻辑 服务 层 及 表现 层 三 层 。 
系统 的 层次 结构 图 如 图 7. 2-2 所 示 。 由 于 城市 地 下 电力 管线 GIS 系统 涉及 大 量 的 数据 处 
理 , 如 果 将 业务 逻辑 都 放 在 浏览 器 端 处 理会 使 浏览 器 负担 过 重 ,导致 效率 下 降 , 相 反 如 果 将 
其 都 放 在 服务 器 端 处 理会 使 服务 器 端 请 求 过 多 ,导致 服务 器 堵塞 。 因 此 ,系统 采用 三 层 的 
B/S 层次 结构 ,将 一 部 分 逻辑 放 在 服务 器 端 实现 ,同时 将 GeoServer 放 在 服务 器 端 发 布 ,在 
前 端 和 后 台 间 实现 系统 业务 逻辑 的 负载 均衡 。 


OpenLayers Ajax 
5 地 图 控件 查询 定位 空间 分 析 — 
m - 
图 层 加 载 : WFS. WMS. WCS …… = 
M 
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GIS 服 务 器 (GeoServer) a 

应 

H WFS 数据 读 取 » 设备 管理 

à i 
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B wes 查询 定位 i 权限 管理 

: di 

wcs 空间 分 析 数据 导入 
M A 
M 
] [ 
( UN 
PostgreSQL+PostGIS 
it 地 图 瓦 片 文件 
层 
管 网 属性 数据 管 网 空间 数据 。 _/ 


7.2-2 系统 层次 结构 图 


数据 层 主要 为 提供 数据 服务 的 数据 服务 器 ,由 PostgreSQL 数据 库 和 地 图 瓦 片 文件 构 
Wo PostgreSQL 数据 库 是 最 基础 的 数据 存储 服务 器 ,通过 空间 数据 处 理 插件 PostGIS 使 数 
据 库 具 有 空间 数据 处 理 功 能 。 数 据 层 中 存储 了 瓦 片 地 图 数据 、WebGIS 空间 数据 .电力 管线 
属性 数据 以 及 用 户 管理 数据 。 
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应 用 逻辑 服务 层 主要 起 到 连接 数据 层 和 前 台 表 现 层 的 作用 ,主要 由 GIS HC AS Ah HB 
辑 服务 两 部 分 构成 。GIS 服务 由 GeoServer 提供 , 瓦 片 服务 器 的 通过 读 取 瓦 片 地 图 文件 构 
建 系统 背景 图 层 。GeoServer 可 以 为 表现 层 提供 基于 GIS 开放 标准 规定 的 WES, WMS 等 
协议 的 GIS 访问 服务 。 业 务 逻 辑 服务 通过 基于 符合 J2EE 规范 的 SSH 框架 提供 ,主要 有 设 
备 管理 ,用户 权限 管理 以 及 数据 导入 等 服务 。 业 务 逻 辑 服务 除了 提供 系统 设备 属性 管理 服 
务 外 ,还 提供 系统 设备 逻辑 关系 的 管理 功能 。 电 力 设 备 间 的 关系 包括 承载 关系 .连接 关系 和 
包含 关系 。 根 据 电力 管线 资源 GIS 模型 ,对 电力 管线 设备 进行 建 模 ,数据 库 表 结构 、GIS 服 
务 和 资源 管理 服务 都 是 基于 这 一 模型 。 

表现 层 为 系统 的 功能 实现 层 ,通过 HTML 和 CSS 技术 设计 系统 界面 ,使 用 JavaScript 
脚本 实现 前 台 的 业务 逻辑 控制 。 表 现 层 主 要 由 GIS 功能 模块 .导航 树 模块 .资源 管理 模块 
以 及 其 他 模块 构成 。GIS 功能 模块 为 系统 最 重要 的 功能 模块 ,通过 网 页 开发 框架 
OpenLayers 实现 。GIS 功能 模块 可 以 提供 地 图 这 染 、 基 本 地 图 操作 控件 .图 层 控制 控件 以 
及 实现 地 图 的 交互 操作 ,并且 实 现 了 电力 管线 单线 图 .设备 接线 图 以 及 工 井 剖面 图 的 绘制 和 
编辑 功能 。 

表现 层 与 旭 辑 服务 层 之 间 的 交互 主要 通过 WES, WMS 协议 和 Ajax 技术 实现 。 
OpenLayers 通过 WMS 协议 获取 瓦 片 地 图 数据 ,然后 构建 空间 背景 图 层 ,同时 利用 WFS 协 
议 获 取代 表 管 线 设 备 的 地 物 类 ,将 其 在 地 图 上 演 染 出 来 ,从 而 构建 各 设备 图 层 。 导 航 树 模 块 
与 设备 管理 模块 利用 Ajax 技术 与 业务 逻辑 服务 进行 异步 通信 ,获得 设备 间 逻 辑 关系 ,以 确 
保 正 确 构 建 导 航 树 的 各 节点 ,并 且 保证 系统 在 进行 设备 管理 时 设备 间 的 迎 辑 关系 。 通 过 使 
用 Ajax 技术 实现 网 页 与 服务 器 的 异步 交互 ,实现 了 网 页 的 无 刷新 操作 。 另 外 ,设备 管理 模 
块 利用 WES 服务 与 GIS 模块 通信 查询 ,修改 某 一 设备 的 空间 信息 ,同时 结合 Ajax 获得 的 
设备 属性 信息 实现 对 电力 管线 设备 资源 的 管理 。 

在 综合 考虑 系统 目标 和 功能 需求 的 基础 上 .设计 了 城市 地 下 电力 管线 管理 系统 的 功能 。 
系统 的 功能 主要 包括 GIS 基本 功能 、 设 备 管理 ,管线 业务 管理 和 其 他 功能 四 个 功能 模块 构 
成 。 系 统 的 功能 结构 图 如 图 7. 2-3 所 示 。 


7.2.1 GIS 功能 模块 设计 


1. 地 图 泻 染 

主要 解决 将 指定 的 空间 数据 以 地 图 的 形式 绘制 出 来 的 问题 ,主要 包括 瓦 片 图 层 的 这 染 、 
矢量 图 层 的 这 染 以 及 电力 管线 设施 的 符号 系统 。 系 统 通过 瓦 片 图 层 的 浑 染 构建 系统 的 背景 
图 层 , 通 过 矢量 图 层 的 这 染 解决 电力 管线 设备 图 层 的 显示 。 另 外 ,为 了 有 效 区 分 不 同类 型 的 
电力 设施 ,需要 在 矢量 图 层 的 这 染 中 加 入 符号 化 的 概念 ,电力 管线 符号 系统 主要 就 是 对 电力 
管线 设施 的 符号 化 。 系 统 符号 库 中 包含 常用 的 电力 管线 设施 的 符号 ,系统 能 够 根据 符号 库 
将 电力 管线 设施 用 对 应 的 符号 在 地 图 上 绘制 出 来 ,符号 库 的 绘制 国内 电力 行业 参考 了 标准 。 

2. 地 图 控制 

指 的 是 基础 的 地 图 操作 以 及 一 些 地 图 控件 ,如 地 图 的 放大 ,缩小 .平移 ,导航 条 、 比 例 尺 、 
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图 7.2-3 系统 功能 结构 图 


应 眼 图 .全 图 显示 、 图 层 选择 等 地 图 控件 。 地 图 的 漫游 操作 可 以 利用 鼠标 实现 ,比如 滚轮 缩 
放 地 图 , 单 击 拖 动 地 图 ,也 可 以 通过 导航 条 的 缩放 和 平移 地 图 实现 。 应 眼 图 是 GIS 信息 系 
统 中 基础 功能 之 一 ,可 以 通过 小 窗口 达到 快速 定位 到 地 图 上 某 个 范围 的 功能 。 另 外 ,通过 其 
他 地 图 控件 可 以 方便 地 控制 地 图 操作 ,实现 显示 当前 比例 尽快 速 定 位 地 图 .显示 整体 地 图 
以 及 图 层 显示 的 选择 等 GIS 基本 功能 。 

7.2.2 设备 管理 模块 设计 


1. 导航 树 管理 

导航 树 是 电力 管线 设备 管理 的 重要 组 成 部 分 ,用 户 可 以 通过 导航 树 查询 电力 设备 间 的 
拓扑 连接 关系 。 地 下 电力 管线 系统 中 的 各 种 设备 存在 着 类 似 树 状 结构 的 连接 关系 ,导航 树 
通过 设备 间 的 关系 模型 可 以 管理 城市 地 下 电力 管 网 中 所 有 设备 。 用 户 可 以 在 导航 树 中 查询 
电力 管线 设备 ,并 且 能 够 根据 拓扑 连接 关系 在 导航 树 中 添加 、 删 除 相应 节点 以 实现 导航 树 的 
动态 更 新 。 

2. 查询 定位 功能 

查询 定位 功能 是 GIS 最 基础 的 功能 之 一 ,系统 根据 用 户 请 求 找 到 符合 的 地 理 信息 并 将 
其 在 地 图 上 定位 出 来 。 用 户 可 以 通过 导航 树 的 右键 菜单 或 者 输入 相关 信息 查询 电力 管线 设 
备 在 地 图 上 的 位 置 。 系 统 可 以 实现 不 同方 式 的 查询 操作 ,可 以 实现 通过 设备 坐标 查询 电力 
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设备 在 地 图 上 的 位 置 ,也 可 以 提供 按照 设备 类 型 .设备 材质 等 的 条 件 查 询 , 并 可 以 提供 模糊 
查询 操作 。 

3. 资源 管理 功能 

资源 管理 是 电力 管线 管理 GIS 系统 中 除 GIS 功能 外 另 一 项 基本 功能 ,系统 的 设备 的 资 
源 管 理 贯穿 于 系统 各 个 功能 模块 之 中 。 它 主要 包括 管 网 点 状 设备 .电缆 \ 管 沟 段 等 设备 的 增 
删改 查 , 设 备 属性 查询 与 修改 ,设备 相关 图 片 和 附件 上 传 ,查询 ,设备 间 关系 的 管理 等 功能 。 
用 户 不 仅 可 以 在 导航 树 中 管理 管 网 设备 ,还 可 以 在 地 图 上 添加 ,查询 、 修 改 电力 设备 ,实现 了 
导航 树 与 地 图 上 设备 的 关联 操作 。 

4. 入 沟 管理 

入 沟 管 理 指 电缆 标准 段 从 起 点 到 终点 所 应 经 过 的 电缆 管 沟 段 ,系统 通过 入 沟 操 作 管理 
电缆 标准 段 与 管 沟 段 间 的 逻辑 关系 。 系 统 的 入 沟 管 理 包括 管 沟 段 的 增加 、 删 除 和 更 改 , 能 够 
实现 标准 段 入 沟 的 可 视 化 操作 。 


7.2.3 管线 业务 功能 模块 设计 


1. 轨迹 图 管理 

系统 通过 电力 管线 地 理 轨迹 图 管理 可 以 实现 管 网 连通 性 分 析 、 空 间 定 位 分 析 和 管 网 拓 
扑 关系 分 析 。 并 且 能 够 根据 比例 尺 过 滤 地 图 上 的 电力 管线 设备 , 随 着 比例 尺 的 增 大 ,在 地 图 
上 显示 的 电力 管线 设备 越 详细 。 另 外 ,系统 能 够 突出 显示 单一 配 电 线路 和 单一 变电站 上 的 
电气 设备 .相关 的 土建 设施 以 及 电力 管线 轨迹 图 ,屏蔽 无 关 设施 。 

2. 单线 图 管理 

单线 图 是 电力 管线 的 拓扑 结构 .运行 状态 等 信息 的 图 形 或 图 像 的 显示 形式 。 配 电线 路 
单线 图 可 以 直观 反映 电网 逻辑 关系 ,展现 电网 设备 间 的 连接 关系 。 系 统 可 以 通过 地 理 轨迹 
图 生成 电气 单线 图 ,实现 单线 图 与 地 理 轨迹 图 的 关联 。 工 作 人 员 可 以 查看 配 电线 路 的 单线 
图 ,并 实现 单线 图 的 绘制 .修改 和 删除 。 

3. 设备 接线 图 管理 

设备 接线 图 能 够 可 视 化 展示 相关 设备 内 部 的 线路 接线 图 ,系统 能 够 实现 电力 设备 接线 
图 的 绘制 与 编辑 ,并 可 以 将 接线 图 中 的 设备 和 管线 与 地 理 轨迹 图 中 的 设备 和 管线 关联 在 一 
起 。 通 过 系统 的 接线 图 管理 功能 ,电网 管理 人 员 可 以 绘制 与 管理 设备 接线 图 ,工作 人 员 方 便 
快捷 的 查询 电力 设备 中 的 线路 连接 关系 。 

4. 工 井 立 视图 管理 

工 井 立 视图 是 电缆 井 俯 视图 、 管 沟 关联 图 和 剖面 图 的 合并 展现 ,是 地 下 电力 管线 管理 的 
最 重要 的 组 成 部 分 。 由 于 地 下 电力 管线 具有 隐蔽 性 、 网 络 型 .复杂 性 ,人 工 管 理 很 难 分 辨 电 
线 走 向 ,位 置 等 关键 信息 ,很 容易 造成 施工 事故 的 发 生 。 工 井 立 视图 提供 了 以 计算 机 技术 和 
GIS 技术 科学 解决 这 一 问题 的 方法 , 它 通过 GIS 服务 和 逻辑 服务 展示 了 工 井 与 管 沟 的 连接 
关系 , 管 沟 内 电缆 放置 的 位 置 .电缆 走向 等 关键 信息 。 工 井 立 视图 为 地 下 电力 管线 的 规划 、 
施工 、 巡 检 等 管理 提供 了 科学 的 解决 方法 。 
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7.2.4 其 他 管理 模块 


1. 用 户 管理 功能 

系统 只 允许 拥有 相关 权限 的 用 户 才能 进入 系统 进行 相应 的 操作 。 系 统 提供 了 用 户 信息 
管理 .添加 用 户 、 修 改 密 码 等 相关 操作 ,并 将 用 户 分 为 管理 员 与 普通 用 户 两 种 权限 ,只 有 拥有 
管理 员 权限 的 用 户 才能 进行 用 户 的 添加 与 删除 操作 。 

2. 数据 导入 功能 

随 着 城市 地 下 电力 管 网 覆盖 范围 的 不 断 扩 大 ,设备 数量 成 指数 级 增长 ,而 人 工 添 加 的 方 
式 工 作 量 大 、 效 率 低下 ,还 不 能 避免 错误 的 发 生 。 因 此 ,系统 必须 提供 数据 的 批量 输入 并 可 
进行 数据 的 质量 检查 功能 。 数 据 的 批量 输入 可 以 通过 Excel 模板 进行 ,在 导入 的 同时 进行 
数据 规则 初步 检查 ,并 将 检查 结果 反馈 给 用 户 。 


7.3 数据 库 设 计 


系统 采用 PostgreSQL 作为 属性 数据 库 ,PostGIS 作为 空间 数据 库 , 通 过 Hibernate 框 


架 来 实现 数据 的 持久 化 。 
7.3.1 系统 设备 模型 设计 
1. 设备 模型 结构 


城市 地 下 电力 管线 设备 模型 如 图 7. 3-1 所 示 , 由 电气 设备 \ 土 建设 备 和 人 逻辑 关系 三 部 分 
构成 。 电 气 设备 是 电能 从 变电站 配送 到 最 终 用 户 所 需 经 过 的 各 个 节点 与 线路 的 总 称 ,其 中 
包括 容器 线 线 段 和 配 电线 路 。 配 电线 路 是 逻辑 设备 ,为 从 配 电 起 点 到 配 电 终 点 一 条 电气 通 
路 。 配 电线 路 是 管理 所 有 电气 设备 敢 辑 关系 的 基础 ,包含 在 电气 通路 所 经 过 的 所 有 容器 和 
线 线段 。 容 器 是 电网 的 各 节点 设备 ,包括 变电站 分支 第 、 开 关 站 、 环 网 柜 、 分 支 接头 、 变 压 
器 。 土 建设 备 是 承载 电气 设备 的 城市 基础 设施 ,电力 管 网 是 搭建 在 其 基础 之 上 的 。 土 建设 
备 包 括 工 井 、 杆 塔 等 地 下 和 地 上 的 点 状 建筑 以 及 管 沟 段 , 管 沟 线 和 城市 道路 。 人 逻辑 关系 是 用 
来 描述 系统 设备 相互 之 间 的 关联 关系 ,我 们 将 其 总 结 为 连接 关系 、 承 载 关系 和 包含 关系 三 种 


城市 地 下 电力 管 网 设备 模型 
电气 设备 | [ 土建 设备 BMRA 
| L3 | 
4 | | 点 | lalale 
&IE aealg |e ei 


图 7.3-1 系统 设备 模型 
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关联 关系 。 

2. 设备 逻辑 关系 模型 

系统 设备 逻辑 关系 模型 如 图 7. 3-2 所 示 ,其 中 容器 线 线段 、 变 电站、 城市 道路 、 管 沟 段 、 
点 状 建筑 为 物理 设备 , 配 电线 路 \ 管 沟 线 为 迎 辑 设备 。 逻 辑 关系 模型 分 为 电气 设备 间 的 关联 
关系 土建 设备 间 的 关联 关系 以 及 电气 与 土建 设备 间 的 关联 关系 。 配 电线 路 的 起 点 为 变 电 
站 ,容器 和 线 缆 段 是 连接 关系 ,多 个 线 缆 段 和 容器 的 连接 构成 了 配 电线 路 。 城 市 的 道路 承载 
了 管 沟 段 与 点 状 建筑 构成 的 管 沟 线 , 土 建设 备 的 建设 都 是 以 道路 为 基础 的 。 线 缆 段 铺设 在 
地 下 管 沟 段 中 或 者 铺设 在 地 上 由 杆 塔 构成 的 虚拟 管 沟 段 , 管 沟 段 是 承载 电气 线路 的 基础 。 


| tn | aaa oana 1 
变电站 ”| 一 连接 -一 ， 配 电线 路 ，! | 管 沟 线 《承载 一 | ”道路 
E E 


电气 容器 | 一 连接 线 缆 段 承载 管 沟 段 连接 一 一 | 点 状 建筑 


7.3-2 设备 逻辑 关系 模型 


7.3.2 系统 属性 数据 库 设 计 


1. 系统 属性 数据 库 
系统 属性 数据 库 为 系统 设备 描述 .业务 图 属性 以 及 设备 间 的 逻辑 关系 等 提供 数据 支持 。 
我 们 将 属性 数据 库 分 为 了 电气 部 分 .土建 部 分 .业务 图 实体 部 分 以 及 系统 辅助 实体 部 分 。 系 
统 选用 的 PostgreSQL 数据 库 是 一 种 对 象 一 关系 型 数据 库 管 理 系统 ,不 仅 支持 关系 数据 模 
型 ,而且 也 能 够 支持 面向 对 象 的 数据 模型 。 项 目 组 根据 系统 需求 ,使 用 面向 对 象 的 数据 模型 
设计 了 系统 属性 数据 库 , 实 体 清 单 如 表 7. 3-1 所 示 。 
表 7.3-1 属性 数据 库 实体 清音 


名 R R m # È 

对 象 基础 PD_OBJECT_BASE 父 类 实体 表 
配 电线 路 PD EL LN CABLELINE 电气 实体 表 
容器 PD_EL_PT_CONTAINER_V 电气 实体 表 
分 支 箱 PD EL CN BRANCH BOX 电气 实体 表 
变压器 PD EL CN TRANSFORMER 电气 实体 表 
变电站 PD EL CN TRANSFORMERSUBSTATION 电气 实体 表 
开关 站 PD_EL_CN_SWITCH_STATION 电气 实体 表 
环 网 柜 PD_EL_CN_RINGMAINUNIT 电气 实体 表 
AGB PD EL LN WIRECABLE SEGMENG V 电气 实体 表 
PAB PD_EL_CN_WIRE_SEGMET 电气 实体 表 
"ABE PD EL CN CABLE SEGMENT 电气 实体 表 


管 沟 线 PD EW PIPE LINE V 土建 实体 表 
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续 表 

名 K R B fe È 
管 沟 段 PD EW PP SEGMENT V 土建 实体 表 
虚拟 管 沟 PD EW PP VIRTUAL PIPE 土建 实体 表 
排 管 PD_EW_PP_RACK_PIPE 土建 实体 表 
桥架 PD_EW_PP_BRIDGE 土建 实体 表 
沟 道 PD_EW_PP_CHANNEL 土建 实体 表 
直 埋 PD_EW_PP_BURIED 土建 实体 表 
隧道 PD_EW_PP_TUNNEL 土建 实体 表 
点 状 建筑 PD EW POINT BUILDING 土建 实体 表 
T3 PD EW PT WELL 土建 实体 表 
mE PD EW PT TOWER 土建 实体 表 
剖面 PD_PIPE_PROFILE 业务 图 实体 表 
管 孔 PD_PIPE_HOLE 业务 图 实体 表 
支架 PD_PIPE_BRACKET 业务 图 实体 表 
道路 PD_EW_ROAD 系统 辅助 实体 表 
附件 PD_AUXILIARY 系统 辅助 实体 表 
照片 PD_PHOTO 系统 辅助 实体 表 
线 缆 段 所 经 管 沟 段 PD WIRECABL TO PIPE SEGMENT 系统 辅助 实体 表 

2. 实体 继承 关系 


PostgreSQL 数据 库 实现 表 继 承 的 机 制 , 通 过 表 继 承 机 制 用 户 对 一 个 表 使 用 查询 时 可 以 
引用 此 表 及 其 所 有 后 代表 的 记录 。 利 用 这 一 机 制 ,我 们 将 属性 数据 库 所 有 实体 表 统 一 继承 
于 对 象 基础 表 。 子 表 通 过 对 象 基础 表 中 的 字段 描述 实体 具有 的 相同 属性 ,同时 加 入 描述 各 
自 不 同属 性 的 子 表 字段 。 属 性 数据 库 实体 继承 关系 如 图 7. 3-3 所 示 。 


照片 || me Dom ] 
| 
管 沟 线 配 电线 路 
EH Tn TT RME cun 
I -一 一 i — EFRR 
ENTERS DES 
Em H 环 网 柜 
a Le| 管 沟 段 Fa pe 变压器 
a EA 
iz ze | sa ]| mm L] 


7.3-3 实体 继承 关系 图 
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对 象 基础 表 的 表 结 构 如 表 7. 3-2 所 示 。 电 气 设 备 实体 表 、 土 建设 备 实体 表 、. 业 务 图 实体 
表 和 系统 辅助 实体 表 统 一 继承 于 对 象 基础 表 , 系 统 可 以 通过 它 统一 查询 所 有 属性 数据 ,并 可 
以 管理 属性 表 中 的 相同 字段 。 同 时 项 目 组 通过 电力 管线 设备 模型 ,使 用 多 层 继承 机 制 将 具 
有 相同 功能 的 设备 继承 于 同一 张 父 表 , 实 现 了 属性 数据 库 的 分 层 管理 。 电 气 点 状 设备 如 分 
支 箱 、 环 网 柜 、 变 压 器 、 变 电站 、 开 关 站 继承 于 容器 父 表 ; 电缆 段 和 线 缆 段 分 别 代表 配 电线 路 
的 地 下 和 地 上 部 分 继承 于 线 线段 父 表 ; 土建 点 状 设备 如 工 井 和 杆 塔 继承 于 点 状 设备 父 表 ; 
直 埋 、 隧 道 HEAP 沟 道 .桥架 等 地 下 管 沟 段 和 地 上 的 虚拟 管 沟 段 统一 继承 于 管 沟 段 父 表 。 


表 7.3-2 PD OBJECT BASE 结构 


字段 名 称 & B 数据 类 型 说 明 
自动 ID AUTO_ID INTEGER 主键 
静态 ID STATIC_ID BIGINT 非 空 
名 称 NAME TEXT 
对 象 类 型 OBJECT_TYPE INTEGER 


3. 属性 数据 库 模型 图 
属性 数据 库 中 实体 表 之 间 的 关联 关系 如 图 7. 3-4 所 示 。 下 面 介绍 属性 数据 库 实 体 表 间 
的 联系 。 


PD EL CN 变电站 PD_EL_LN_ 配 电线 路 PD EW PIPE 管 沟 线 PD 道路 

PK | AUTO ID PK | AUTO ID || PK | auro in |. [PK [auro m 
STATIC ID STATIC ID STATIC ID STATIC ID 
E START TRANS STATION BELONGS ROAD m 


T T 


Å 
PD EL PT 容器 PD EL LN {RMEL PD EW PP 管 沟 段 PD EW ZU H 
<[aurow | PK | AUTO ID PK | AUTO ID PK | AUTO ID. 
STATIC ID STATIC ID STATIC ID STATIC ID 
i START CONTAINER START BUILDING A 
END CONTAINER END BUILDING 
BELONGS CABLELINE LINE BELONG ID PD PIPE 管 孔 
" ; l hU 
i Å STATIC ID. 
PD _ 线 缆 段 所 经 管 沟 段 PD_PIPE_ 剂 而 PROFILE ID 
PK | SEGMENT HAVE WIRECABLE PK | AUTO ID. 
PK | WIRECABLE BELONGS SEGMENT | | —] — — — —— PD PIPE XAR 
STATIC ID l4 
| PP SEGMENT ID PK | AUTO ID 
E STATIC ID 
PROFILE ID 


7.3-4 属性 数据 库 模型 图 


288 <@| WebGIS 工 程 项 目 开发 实践 i 


D 电气 实体 部 分 

CD 变电站 与 配 电 线路 通过 起 点 电站 形成 一 对 多 联系 ; 

(2) 配 电线 路 与 线 缆 段 及 其 子 表 通 过 所 属 配 电线 路 形成 一 对 多 联系 ; 

G) 线 费 段 与 容器 类 实体 表 通 过 起 点 容器 和 终点 容器 形成 一 对 一 联系 。 
2) 土建 实体 部 分 

CD 道路 与 管 沟 线 通过 所 属 道路 形成 一 对 多 联系 ; 

(2) 管 沟 线 与 管 沟 段 及 其 子 表 通 过 所 属 管 沟 线 形成 一 对 多 联系 ; 

(3) 管 沟 段 与 点 状 建筑 间 通 过 起 点 土建 和 终点 土建 形成 一 对 一 联系 。 

3) 其 他 实体 联系 

CD. 线 线段 与 管 沟 段 类 实体 表 通 过 线 线段 所 经 管 沟 段 形成 多 对 多 联系 ; 
D 剖面 实体 表 与 管 沟 线 通 过 所 属 管 沟 线形 成 多 对 一 联系 ; 

G) 管 孔 和 支架 与 剖面 实体 表 通 过 剖面 号 形成 多 对 一 联系 。 


7.3.3 系统 空间 数据 库 设计 


1. 空间 数据 库 
系统 空间 数据 库存 储 电力 管线 设备 和 管 网 各 业务 图 的 地 理 空间 信息 ,GIS 服务 器 
GeoServer 通过 读 取 空间 数据 库 的 实体 表 中 的 空间 信息 确定 地 物 类 的 位 置 和 几何 形状 , 然 
后 将 其 在 地 图 上 泻 染 出 来 。 空 间 数 据 库 实体 清单 如 表 7. 3-3 所 示 。 
表 7.3-3 空间 数据 库 实体 清单 


名 称 & m 备 È 
空间 基础 表 GEO_BASE 空间 数据 库 父 表 
空间 对 象 基础 表 GEO_OBJECT_BASE 拥有 属性 实体 空间 父 表 
空间 土建 表 GEO CIVIL ENGINEERING 土建 对 象 的 空间 描述 
空间 电气 表 GEO_ELECTRICAL 电气 对 象 的 空间 描述 
剖面 表 GEO PIPE PROFILE 剖面 图 的 空间 描述 
管 孔 表 GEO_PIPE_HOLE 管 孔 的 空间 描述 
支架 表 GEO_PIPE_BRACKET 支架 的 空间 描述 
工 井 测绘 表 GEO_POINT_SURVERY 工 井 俯视 图 空间 描述 
单线 图 表 GEO_CONNECT_WIRE 单线 图 的 空间 描述 
接线 图 表 GEO_CONNECT_LINE 接线 图 的 空间 描述 
电缆 表 GEO_CABLE 管 孔 和 支架 中 的 电缆 空间 描述 


系统 通过 PostGIS 对 空间 数据 库 构 建 提供 支持 ,空间 数据 库 中 地 理 空间 数据 统一 使 用 
Geometry 数据 类 型 。 由 于 PostGIS 很 好 地 遵守 OGC 的 SFA 规范 ,Geometry 数据 类 型 能 
够 支持 点 多 点 X LER 多边 形 、 多 多 边 形 以 及 集合 对 象 集 等 几何 类 型 。Geometry 数据 类 
型 有 两 种 表现 形式 : 一 种 是 几何 对 象 的 文本 表现 形式 (WKT); 另 一 种 是 SQL 实现 形式 , 即 
Canonical Form, Jf H. PostGIS 可 以 通过 ST_AsText(geometry) 和 ST_GeomFromEWKT 
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(text) 函数 实现 两 种 表现 形式 间 的 自由 转换 。 

2. 空间 数据 库 实 体 结构 

空间 数据 库 的 实体 结构 如 图 7. 3-5 所 示 , 空 间 数据 库 实 体 表 统一 继承 于 空间 基础 表 
(GEO_BASE)。 工 井 俯视 图 实体 表 .单线 图 实体 表 .接线 图 实体 表 存储 着 可 以 浑 染 各 种 业 
务 图 的 空间 数据 , 它 记 录 着 业务 图 的 各 元 素 形状 和 位 置信 息 。 


GEO_CABLE 


GEO PIPE PROFILE 


GEO CONNECT WIRE 
一 一 GEO_CIVIL_ENGINEERING 


GEO_BASE 一 GEO OBJECT BASE 4 GEO ELECTRICAL 


= GEO_PIPE_BRACKET 


EN GEO POINT SURVERY 


= GEO_PIPE_HOLE 


GEO CONNECT LINE 


图 7.3-5 空间 数据 库 实体 结构 图 


土建 实体 表 和 电气 实体 表 分 别 记录 的 是 土建 层 和 电气 层 的 空间 数据 ; 剖面 实体 表 存 储 
的 是 管 沟 段 的 横 剖面 的 几何 信息 和 关键 属性 ; 管 孔 实体 表 和 支架 实体 表 则 记录 着 剖面 图 上 
的 管 孔 的 位 置 及 几何 形状 。 与 属性 数据 库 数 据 相 对 应 的 空间 土建 表 、. 电 气 表 、 剖 面 图 表 、 管 
孔 和 支架 表 继 承 于 空间 对 象 基 础 表 (GEO_OBJECT_BASE),GEO_OBJECT_BASE 的 表 结 
构 如 表 7. 3-4 所 示 。 
表 7.3-4 PD_OBJECT_BASE 结构 


字段 名 称 K B 数据 类 型 说 明 
自动 ID AUTO ID INTEGER 主键 
静态 ID STATIC ID BIGINT EZ 
空间 数据 GEOMETRY_DATA GEOMETRY 
名 称 NAME TEXT 
对 象 类 型 OBJECT_TYPE INTEGER 


7.3.4 属性 与 空间 数据 库 关联 设计 


系统 通过 GIS 技术 实现 空间 数据 的 发 布 功能 ,通过 结合 电力 管线 属性 数据 与 地 理 数据 
系统 实现 系统 图 文 一 体 化 操作 ,从 地 图 上 可 以 查询 和 管理 设备 与 管线 的 地 理 位 置 等 空间 信 
息 ,也 可 以 管理 设备 的 相关 属性 信息 。 由 于 系统 数据 库 采 用 了 属性 和 空间 的 两 层 设计 结构 ， 
因此 实现 系统 的 图 文 一 体 化 操作 的 关键 在 于 属性 数据 和 空间 数据 间 的 关联 设计 。 

属性 数据 库 和 空间 数据 库 中 各 实体 表 的 主键 (AUTO_ID) 是 PostgreSQL 数据 库 中 的 
序列 对 象 (SEQUENCE) 实 现 由 数据 库 控制 为 每 条 记录 生成 唯一 序号 。 而 空间 数据 库 和 属 
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性 数据 库 中 同一 记录 的 一 对 一 关联 则 是 通过 静态 IDCSTATIC_ID) 实 现 的 ,STATIC _ID 的 
生成 规则 通过 时 间 截 生成 算法 由 系统 业务 逻辑 层 控制 的 。 由 业务 逻辑 层 控制 静态 ID 的 生 
成 不 仅 可 以 保证 静态 ID 的 唯一 性 ,而 且 可 以 保证 属性 数据 库 和 空间 数据 库 中 相同 记录 的 静 
态 ID 也 是 相同 的 。 属 性 和 空间 数据 库 中 相同 记录 的 静态 ID 的 一 致 性 为 属性 和 空间 数据 的 
关联 操作 提供 的 基础 。 

属性 数据 和 空间 数据 的 关联 操作 包括 增加 、 删 
除 和 修改 。 添 加 数据 记录 的 关联 操作 是 由 系统 的 
业务 逻辑 层 控制 的 ,业务 逻辑 层 会 同时 控制 生成 一 


开始 


获取 SQL 类 型 的 空间 数据 Geometry 


一 对 应 的 属性 和 空间 数据 记录 ,而 数据 的 删除 和 修 = 
改 的 关联 则 是 通过 数据 库 触发 器 控制 的 。 在 系统 一 
执行 数据 的 删除 和 特定 字段 的 更 新 操作 时 ,触发 器 拆 分 WKT 形 式 的 字符 中 
会 通过 静态 ID 字段 删除 和 更 新 相应 数据 库 中 的 记 获得 更 新 后 的 经 纬度 


į 
判断 设备 类 型 OBJECT_TYPE 


录 。 系 统 数据 库 设计 的 触发 函数 包括 属性 数据 删 
除 的 触发 函数 、 空 间 数 据 删 除 的 触发 函数 .NAME i 
字段 更 新 触发 函数 以 及 经 纬度 更 新 的 触发 函数 。 通过 STATIC ID 更 新 属性 数据 库 中 相 
其 中 ,经 纬度 更 新 的 触发 函数 的 流程 图 如 图 7. 3-6 应 记录 的 经 纬度 

所 示 , 它 的 主要 功能 是 在 空间 数据 库 中 点 设备 的 
GEOMETRY 数据 发 生 修改 时 ,更 新 属性 数据 库 中 

相应 记录 的 经 纬度 。 图 7. 3-6 经 纬度 更 新 触发 西数 流程 图 


7.4 系统 实现 


7.4.1 开发 环境 搭建 


城市 地 下 电力 管线 管理 系统 是 基于 B/S 架构 的 应 用 管理 系统 ,其 系统 开发 平台 的 软件 
环境 配置 要 求 如 下 : 

CD 操作 系统 : Windows 系列 。 

(2) Java 运行 环境 : JDK 1.6 及 以 上 版 本 。 

(3) Web 服务 器 : Tomcat 7. 0 服务 器 。 

(4) 数据 库 : PostgreSQL 9. 2 和 PostGIS 2.0 及 以 上 版 本 。 

(5) 地 图 服务 器 : GeoServer 2.3 及 以 上 版 本 。 

(6) J2EE 开发 平台 使 用 : Eclipse 4.2 及 以 上 版 本 。 

系统 在 Eclipse Pf F fH Java, HTML 和 JavaScript 等 语言 进行 J2EE 开发 。 系 统 的 
开发 平台 使 用 开源 的 GIS HE: GeoServer, PostGIS 和 OpenLayers。GeoServer 是 系统 的 
GIS 服务 器 ,主要 作为 GIS 服务 的 发 布 平台 ; PostGIS 为 系统 空间 数据 的 存储 提供 支持 ; 
OpenLayers 为 网 页 端的 GIS 开发 框架 ,能 够 快速 进行 网 页 端 GIS 功能 的 开发 和 维护 。 

(1) 项 目 开发 的 第 一 步 是 搭建 项 目 环境 及 项 目 集成 框架 等 ,在 此 之 前 需要 将 Spring2、 
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Structs2、Hibernate 及 系统 应 用 的 其 他 jar 包 导 入 到 项 目的 lib 文件 下 。 
接 下 来 需要 对 Struts、Spring、Hibernate 以 及 web. xml 文件 进行 配置 。 这 些 配 置 文件 


的 配置 过 程 如 下 。 
(2) 配置 Struts2: 在 项 目的 ClassPath 下 创建 Struts. xml 文件 ,其 配置 代码 如 下 。 


<?xmlversion = "1.0" encoding = "UTF — 8"?> 
<! DOCTYPEstrutsPUBLIC 
" — //RpacheSoftwareFoundation//DTD StrutsConfiguration2.0//EN" 
"http: //struts. apache. org/dtd s/struts - 2. 0. dtd "> 
< struts» 
< constant nane = "struts. devMode" value = "false" /> 
< constant name = "struts. multipart. saveDir" value = "/tmp"></constant > 
< constant name = "struts. multipart. maxSize" value = "20971520" /> 
<! -- 树 目录 及 侧 栏 配置 --> 
< package name = "tree" extends = "struts - default"> 
< action name = "initTree" class = "treeAction" meth od = "execute" 
< result nane = "error"»/wrong. jsp</result > 
</action> 
<action name = "getSideBarJson" class = "getSideBarJson" meth od = "execute"> 
< result name = "error">/wrong. jsp </result > 
«/action» 
< action name = "getSideBarJJson" class = "getSideBarJJson" meth od = "execute"> 
< result nane = "error">/wrong. jsp </result > 
</action> 
</package > 
<! -- 地 图 相关 配置 -一 > 
< package name = "property" extends = "struts - default"> 
< interceptors > 
< interceptor name = "loginCheck" class = "loginCheck"> 
</ interceptor > 
< interceptor - stackname = "myStack"> 
< interceptor - refname = "loginCheck"/> 
< interceptor - refname = "defaultStack"/> 
</interceptor - stack» 
«/interceptors > 
<default - interceptor - refname = "myStack"></default - interceptor - ref > 
< global- results > 
< result name = "unlogin">/template/relogin. jsp </result> 
«/global- results > 
<action name = "getProperty" class = "getProperty" meth od = "execute"> 
< result name = "1010203">/template/property/transformer. jsp </result > 
…… .<! 省 略 的 配置 信息 > 
</action> 
< action name = "getPropertyJson" class = "getPropertyJson" meth od = "execute"> 
< result name = "input">/template/common/error. jsp</result > 
</action> 
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< action name = "getPropertiesJson" class = "getPropertiesJson" 
method = "execute"> 
< result nane = "input"»/tenplate/common/error. jsp </result > 
</action> 
</package > 
<! -- 系统 功能 配置 --> 
< package name = "system" extends = "struts - default"> 
< interceptors > 
< interceptor name = "loginCheck" class = "loginCheck"» 
</interceptor > 
</interceptors > 
< global - results > 
< result name = "unlogin">/template/relogin. jsp </result > 
«/global- results > 
<action name = "hone" class = "home" meth od = "execute"> 
< result name = "success">/template/home. jsp </result > 
< result name = "unlogin">/template/login. jsp </result > 
< interceptor - refname = "defaultStack" /> 
< interceptor - refname = "loginCheck" /> 
</action> 
c .<! 省 略 的 配置 信息 > 
</package > 


</struts > 


(3) 配置 Hibernate: 在 Hibernate 的 配置 文件 中 配置 数据 库 的 连接 信息 、 数 据 库 方言 
及 打印 SQL 语句 等 属性 ,其 关键 代码 如 下 。 


<?xmlversion = "1.0" encoding = "utf 一 8"?> 
<! DOCTYPEhibernate — configurationPUBLIC 
" — //Hibernate/HibernateConf igurationDTD 3.0//EN" 
"http://www. hibernate. org/dtd /hibernate - configuration - 3.0. dtd "> 
< hibernate - configuration > 
< session- factory? 
< property name = "hibernate. bytecode. use_reflection_optimizer"> false 
</property> 
<property name = "hibernate. connection. driver_class"> 
org. postgresql. Driver </property> 
< property name = "hibernate. connection. password "> admin </property> 
<property name = "hibernate. connection. url"> 
jdbc : postgresql : //localhost :5432/OpengisData Base </property> 
< property name = "hibernate. connection. username"» postgres </property> 
< property name = "hibernate. dialect"> 
org. hibernate. spatial. dialect. postgis. PostgisDialec t </property> 
<property name = "hibernate. format_sql"> true </property> 
< property name = "hibernate. search. autoregister_listeners"> false 
</property> 
< property name = "hibernate. show_sql"> true </property> 
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< property name = "hibernate.connection.pool size"» 20 </property> 
< property name = "hibernate. proxool.pool alias"» pooll </property> 
< property name = "hibernate.max fetch depth "> 1 </property> 
< property name = "hibernate. jdbc. batch versioned data"» true </property> 
< property name = "hibernate. jdbc.use streams for binary"» true </property> 
< property name = "hibernate. cache. region prefix"» hibernate. test </property> 
<property name = "hibernate. cache. provider class" 
org. hibernate. cache. Hashtable CacheProv ider </property> 
< mapping resource = "org/resource/object/PdEwPpBuried. hbm. xml" /> 
c .<! 省 略 的 映射 信息 > 
«/session- factory» 
</hibernate - configuration? 


(4) 配置 Spring: 利用 Spring 加 载 Hibernate 的 配置 文件 及 Session 管理 类 ,在 配置 
Spring 时 只 需要 配置 Spring 的 核心 配置 文件 applicationContex. xml, 其 代码 如 下 。 


<?xmlversion = "1.0" encoding = "UTF — 8"?> 
< beansxmlns = "http://www. springframework. org/schema/beans" 
xnlns:xsi = "http://www. w3. org/2001/XMLSchena — instance" 
xnlns:aop = "http://www. springframework. org/schema/aop" 
xnlns:tx = "http://www. springframework. org/schema/tx" 
xsi: schemaLocation = " http://www. springframework. org/schema/beanshttp://www. 
springframework. org/schema/beans/spring — beans - 2. 5. xsdhttp://www. springframework. org/ 
schema/aophttp://www. springframework. org/schema/aop/spring - aop - 2. 5. xsdhttp://www. 
springframework. org/schema/txhttp://www. springframework. org/schema/tx/spring - tx - 2. 5. 
xsd"> 
<! —— Service 服务 层 配置 
HÉHUDSHZSHSSUHSHUSUUUHSHHBSBHUESUAUHAUSSSBSSHS 一 一 > 
<! -- WEAR --> 
< bean nane = "treeService" class = "org. ldw. service. treeService"> 
< property name = "treeDao"> 
< ref bean = "treeDao" /» 


</property> 
</bean> 
<!-- XX --> 


<bean name = "loginService" class = "org. ldw. service. loginService"» 
<property name = "userDao"> 
« ref bean = " systenUser" /» 


</property> 
</bean> 
<!-- 属性 = 一 > 


< bean name = "propertyService" class = "org. ldw. service. propertyService"> 
< property name = "daoSelect"> 
< ref bean = " selectRecordAll"/» 
</property> 
<property name = "daoSave"> 
< ref bean = "SaveProperty"/> 
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</property> 
</bean> 
<! -- 系统 用 户 管理 -> 
< bean name = "systenUserService" class = "org. ldw. service. systemUserService"> 
< property name = "userDao"> 
< ref bean = "systemUser"/> 
</property> 
</bean > 
<! -- 文件 数据 导入 --> 
< bean name = "import ExcelService" class = "org. ldw. service. import 
ExcelService"scope = "prototype"> 


< property name = "import Dao"> 


< ref bean = "import Dao"/> 
</property> 
< property name = "import DaoEle"> 
< ref bean = " import DaoEle"/> 
</property> 
< property name = "import DaoWirecable"> 
< ref bean = "import DaoWirecable"/> 
</property> 


< property name = "import Dao0bj"> 
<ref bean = "import Dao0bj"/> 
</property> 
</bean> 
<! -- 图 片 导入 --> 
< bean nane = "uploadsPhotoService" 
class = "org. ldw. service. uploadsPhotoService"scope = "prototype"> 
jpegTool"> 
jpegTool" /> 


<property name = 
<ref bean= 
</property> 
<property name = "daoSave"> 
< ref bean = "SaveProperty" /» 
</property> 


<property name = "photo"> 
< ref bean = "photo" /> 


</property> 
</bean> 
<! -- 拦截 器 --> 


< bean name = "loginCheck" class = "org. ldw. action. loginInterceptor"/> 
<! —— Action 视图 层 配置 
井 并 间 并 并 间 间 并 并 间 并 并 井 间 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 并 一 一 > 
< bean name = "hone" class = "org. ldw. action. homeAction"/> 
< bean name = "login" class = "org. ldw. action. loginAction" scope = "prototype" 
< property name = "loginService"> 
< ref bean = "loginService" /» 
</property> 
</bean> 
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< bean nane = "treeAction" class = "org. ldw. action. TreeAction" scope = "prototype"> 
< property name = "service" 
< ref bean = "treeService" /» 
</property> 
</bean> 
«-- 单线 图 侧 栏 -一 > 
< bean nane = "getSideBarJson" class = "org. ldw. action. getSideBarJson" scope = "prototype"> 
< property name = "proService"> 
< ref bean = "propertyService"/> 
</property> 
</bean> 
<! -- 接线 图 侧 栏 -> 
< bean nane = "getSideBarJJson" 
class = "org. ldw. action. getSideBarJJsonAction" scope = "prototype" 
< property nane = "proService"> 
< ref bean = "propertyService" /» 


</property> 
</bean> 
< bean name = "getAttachment" class = "org. ldw. action. getAttachmentAction" 


scope = "prototype"> 
</bean> 
< bean name = "getProperty" class = "org. ldw. action. getPropertyAction" 
scope = "prototype"> 
eer .<! 省 略 的 映射 信息 > 
</bean> 
<! -- Action 数据 服务 层 配置 
HHHRHHHAFARARH AHHH HAHAHA RRA RR H HHH A HHA ARES 一 一 > 
< bean name = "getPropertyJson" 
class = "org. ldw. action. getPropertyJsonAct ion" scope = "prototype" 
<property name = "proService"> 
< ref bean = "propertyService"/> 
</property> 
</bean> 
o <1 BPS KO R AE > 
< bean name = "delete" class = "org. ldw. action. deleteAction" scope = "prototype"> 
</bean> 
<! — Dao 数据 库 层 配置 
HHRSSHRAAH SAHRA HAAS ASA R HARA SARS ARB HARSH 一 一 > 
<! -- 属性 查询 --> 
< bean name = "selectRecordAll" class = "org. lyd. Hibernate. SelectRecordAll"/» 
<! -- 属性 插入 --> 
< bean name = "SaveProperty" class = "org. lyd. Hibernate. SavePropertyObject"/> 
<!-- JAP RE ==> 
<bean name = "systemUser" class = "org. ldw. dao. systemUserDao" /> 
<!-- 树 目录 一 > 
< bean name = "treeDao" class = "org. lyd. Operate. TreeCatalog" /> 
<! -- excel 数据 导入 --> 


296 «|| WebGIS 工 程 项 目 开发 实践 


< bean nane = "import Dao" class = "org. lyd. Operate. SurveyDataImport " 
scope = "prototype" /» 

< bean nane = "import DaoEle" class = "org. lyd. Operate. ContainerDatalmport " 
scope = "prototype" /» 

< bean name = "import DaoWirecable" class = "org. lyd. Operate. WirecableImport 
"scope = "prototype" /» 

< bean name = "import DaoObj" class = "org. lyd. Operate. InsertObjectByFile" 
scope = "prototype" /> 

<! -一 图 片 导入 --> 

< bean name = " jpegTool" class = "org. lyd. util. JpegTool" scope = "prototype"/> 

< bean name = "photo" class = "org. resource. objectclass. PdPhoto" 
scope = "prototype"/> 

</beans > 


(5) 配置 web. xml; web. xml 的 配置 文件 是 项 目的 基本 配置 文件 ,通过 该 文件 设置 实 
例 化 Spring 容器 、 过 滤器 、Structs2, 以 及 默认 执行 的 操作 ,其 核心 代码 如 下 。 


<?xmlversion = "1.0" encoding = "UTF - 8"?> 
«web - appxmlns: xsi = "http://www. w3. org/2001/XMLSchema - instance" xmlns = "http://java. 
sun. con/xn1/ns/javaee" xnlns: web = "http://java. sun. con/xnl/ns/javaee/web - app 2 5. 
xsd" xsi: schemaLocation = "http: //java. sun. com/xnl1/ns/ javaeehttp: // java. sun. com/xn1/ 
ns/javaee/web- app 2 5.xsd" id- "WebApp ID" version = "2.5"> 
< display - name TONGXIANG </display — name > 
< welcome - file- list > 
< welcome - file> index. jsp </welcome - file> 
«/welcone- file- list > 
<! — CGIservlet 的 配置 --> 
< servlet > 
< servlet — nane» cgi «/servlet - name> 
< servlet - class > org. apache. catalina. servlets. CGIServlet </servlet - class > 
< init - param» 
< param — name > debug </param - name > 
< param - value > 0 «/paran - value» 
«/init- param» 
< init- param» 
< param - nane > cgiPath Prefix «/param - name> 
< param - value» cgi «/param - value > 
«/init- param» 
< init - param» 
< param - name executable «/param - name > 
< param - value > C:VPyth on27\pyth on. exe «/paran - value > 
«/init- param» 
« init- param» 
< param - name > passShellEnvironment «/param — name> 
< param - value» true «/param - value» 
«/init- param» 
< load- on- startup» 5 «/load- on- startup > 
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</servlet > 
< servlet — mapping > 
< servlet - name> default </servlet - name > 
< url- pattern >/</url - pattern» 
«/servlet- mapping» 
< servlet - mapping > 
< servlet — name > cgi </servlet - name> 
< url- pattern >/cgi/ * «/url- pattern > 
</servlet - mapping» 
<! -- strut2 的 配置 --> 
< session- config» 
< session- timeout > 3600 «/session- timeout > 
«/session- config» 
«filter» 
< filter - name> struts2 </filter - name> 
< filter - class» 
org. apache. struts2. dispatcher. ng. filter. StrutsPrepareAndExecuteFilter 
«/filter - class > 
«/filter» 
< filter - mapping? 
< filter - name> struts2 </filter - name> 
« url- pattern» * .action«/url- pattern» 
< dispatcher > REQUEST </dispatcher > 
< dispatcher > FORWARD </dispatcher > 
«/filter- mapping? 
< filter - mapping? 
< filter - name> struts2 </filter - name> 
« url- pattern» * . jsp «/url- pattern» 
< dispatcher > REQUEST </dispatcher > 
< dispatcher > FORWARD </dispatcher > 
«/filter- mapping» 
<! -- spring 监听 --> 
< listener > 
«listener - class > 
org. springframework. web. context. ContextLoaderListener 
«/listener- class > 
</listener > 
</web - app» 


配置 完 以 上 文件 ,整个 项 目的 框架 就 搭建 好 了 , 接 下 来 分 别 对 各 个 模块 的 具体 实现 过 程 


进行 详细 讲解 。 


7.4.2 GIS 功能 模块 实现 


GIS 基本 功能 模块 


是 在 表现 层 开发 的 ,是 在 OpenLayers 开发 框架 提供 的 接口 上 , 通 


过 GeoServer 提供 的 GIS 服务 在 Web 服务 器 端 使 用 HTML 和 JavaScript 语言 开发 实现 的 。 
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1. GIS 模块 流程 图 

GIS 基本 模块 的 主要 实现 流程 图 如 图 7. 4-1 所 示 。 

2. 网 页 端 地 图 缓存 的 实现 

地 图 数据 是 网 页 端 与 服务 器 交互 过 程 中 数据 量 最 大 的 数据 ,所 以 地 图 数据 的 缓存 尤为 
重要 ,可 以 大 大 提高 系统 的 性 能 。 

瓦 片 地 图 的 缓存 是 通过 GeoServer 的 瓦 片 缓存 服务 器 实现 的 ,地 图 的 瓦 片 以 文件 的 形 
式 缓存 在 网 页 端 ,当地 图 范围 发 生 改变 需要 加 载 新 的 地 图 瓦 片 时 先 查询 缓存 ,如 果 缓 存 中 没 
有 该 瓦 片 ,GeoServer 会 向 服务 器 端 请 求 该 瓦 片 ,并 将 其 加 载 在 地 图 上 。 整 个 过 程 的 流程 图 
如 图 7.4-2 所 示 。 


初始 化 参数 eee 


显示 瓦 片 的 ID 


加 载 空间 背景 图 层 该 ID 是 否 存在 于 缓 在 中 


加 载 各 设备 图 层 将 瓦 片 ID 传 弟 到 服务 器 喘 


i i - 
eee 从 网 页 器 组 存 中 读 取 
EE NUES zu AR ae EC E 该 ID 的 瓦 片 数据 

1 


添加 辅助 功能 控件 


更 新 网 页 端 缓存 


添加 图 层 控制 控件 将 该 ID 的 瓦 片 加 载 在 屏幕 上 — 


图 7.4-1 GIS 功能 模块 流程 图 图 7.4-2 地 图 缓存 的 流程 图 


3. GIS 图 形 操作 功能 实现 
OpenLayers 提供 了 导航 条 、 比 例 尺 \ 应 眼 、 图 层 控制 控件 等 ,表现 层 通过 配置 这 些 控件 
的 接口 就 可 以 将 其 加 载 在 GIS 功能 中 。 除 了 通过 操作 导航 条 ,还 可 以 使 用 鼠标 拖 忠 和 深 轮 
来 平移 和 缩放 地 图 。 并 且 , 随 着 地 图 等 级 的 放大 ,不 同 的 设备 图 层 将 加 载 出 来 ,以 便 实现 电 
力 管 线 设备 的 分 级 显示 ,而 且 可 以 通过 图 层 控制 控件 单独 显示 特定 的 设备 图 层 。 利 用 
OpenLayers 框架 实现 系统 的 各 个 地 图 图 层 和 操作 控件 加 载 的 关键 代码 如 下 : 
/* 地 图 初始 化 * / 
Global.locus.method.init = function()( 
var options = ( 
resolutions:[...], 
projection: new OpenLayers. Projection( 'EPSG:4326'), 
maxExtent : new OpenLayers. Bounds(...) 
numZoomLevels:5 
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hi 
/* 定 义 地 图 * / 
Global. locus. map = new OpenLayers. Map( 'map', options); 
Global. locus. layers. baseLayer = new OpenLayers. Layer. WMS("fi £ W", ...) ; 
/* 背 景 图 层 * / 
/* 电气 设备 图 层 * / 
Global.locus.layer.electricalLayer = new OpenLayers. Layer. Vector(" fi RH", ...) ; 
/* 土 建设 备 图 层 * / 
Global. locus. layer. buildingLayer = new OpenLayers. Layer. Vector(" 土 建设 备 "，.…); 


// 地 图 加 载 背景 图 层 和 各 个 设备 图 层 
Global. locus. map. addLayers([ 
Global. locus. layers. baseLayer, 
Global. locus. layer. buildingLayer 
Global. locus. layer. electricalLayer, 


1); 
var navigation = new OpenLayers. Control. Navigation(); 
navigation. zoomBoxKeyMask = OpenLayers. Handler. MOD_ALT; 


Global. locus. map. addControl (navigation); V* 平 移 控件 * / 
Global. locus. map. addControl(new OpenLayers. Control.ScaleLine()); /* 比例 尺 控件 * / 
Global. locus. map. addControl(new OpenLayers. Control. LayerSwitcher() ) ; /* 图 层 选择 控件 * / 
Global. locus. map. addControl (new OpenLayers. Control. OverviewMap()); /* 座 眼 控件 * / 
// 定 义 鼠标 坐标 显示 控件 


Global.locus.mousePositionCtl.control = new OpenLayers.Control.MousePosition({ 
prefix: <a target ="_blank" ' + 
‘href = "http: //spatialreference. org/ref/epsg/4326/"»' + 
"EPSG: 4326 </a> coordinates: ', 
separator: '| ', 
numDigits: 10, 
emptyString: 'Mouse is not over map. ' 
) 
) 
/* 加 载 鼠 标 坐 标 显示 控件 * / 
Global. locus. map. addControl( Global. locus. mousePositionCtl.control); 
Global. locus. mousePositionCtl. control. activate() ; 


} 

D 地 图 漫游 

地 图 漫游 包括 地 图 放大 、 缩 小 、 图 层 控制 、 座 眼 导 航 、 全 图 显示 、 经 纬度 显示 ,关键 代码 
如 下 : 

Global. locus. map. addControl(new OpenLayers. Control. PanZoomBar( { 


position: new OpenLayers. Pixel(2, 15) 
n 
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var navigation = new OpenLayers. Control.Navigation(); 

navigation. zoomBoxKeyMask = OpenLayers.Handler.MOD ALT; 

Global. locus. map. addControl(navigation); 

Global. locus. map. addControl(new OpenLayers.Control.ScaleLine()); 
Global. locus. map. addControl(new OpenLayers. Control. LayerSwitcher()) ; 
Global. locus. map. addControl(new OpenLayers. Control. OverviewMap()); 
Global. locus. map. addControl(Global. locus. select. control); 

Global. locus. select. control. activate(); 

Global. locus. map. zoomIn(); 

Global. locus. map. zoomOut ( ) ; 

Global. locus. map. zoomToExtent (Global. locus. constant. fullExtent) ; 


2) 对 象 删除 
对 象 删除 用 于 删除 选中 的 对 象 ,关键 代码 如 下 : 


public class DeleteObject { 
private Static Sessions - null; 
private Static Transactiontx = null; 
public intd eleteObjectG(LongStatic Id)( 
try( 
S = HibernateSessionFactory. currentSession(); 
tx = s. beginTransaction(); 
intd eleteResult - 
S.createQuery("deletefrom GeoObjectBase whereStatic Id= :Static Id"). 
setParameter("Static Id", Static Id).executeUpdate(); 
tx.commit(); 
return 1; 
)catch(Exceptione)( 
e. printStackTrace(); 
tx. rollback(); 


return 0; 
}finally{ 
HibernateSessionFactory. closeSession() ; 
} 
} 
3) 选择 复制 
选择 复制 功能 对 需要 复制 的 对 象 进行 复制 ,关键 代码 如 下 : 
/* 定义 要 素 拖 动 按钮 * / 
Global.locus.copy.dragControl = new OpenLayers. Control. DragFeature( 


[ 

Global. locus. layers. electricalLayer, 

Global. locus. layers. buildingLayer, 

Global. locus. layers. elevationLayer. surveyLayer 
Lt 

onStart: Global. locus. meth od. startd rag, 
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onDrag: Global. locus. meth od. doDrag, 
onComplete: Global. locus. meth od. endDrag, 


); 
Global. locus. map. addControl (Global. locus. copy. dragControl) ; 
/* Featurestartingtomove * / 
Global. locus. meth od. startd rag = function (feature, pixel) { 
lastPixel = pixel; 
} 
/* Featuremoving * / 
Global.locus.meth od.doDrag = function (feature, pixel) { 
var layers = this. layers || [this. layer]; 
var layer; 
for(var 1=0; 1< layers. length ; ++1) { 
layer = layers[1]; 
Global.locus.copy.features[1] = []; 
for (iinlayer. selectedFeatures) ( 
if (layer. selectedFeatures[i])( 
if(Global. locus. flag. copy) { 
Global. locus. copy. features[1]. push 
(layer. selectedFeatures[ i]. clone()); 
} 
var res = this. map. getResolution(); 
layer. selectedFeatures[ i]. geometry. move( 
res * (pixel.x - lastPixel.x), 
res * (lastPixel.y - pixel.y) 
E 
layer.drawFeature(layer. selectedFeatures[i]); 
if (Global. locus. flag. copy) { 
layer. addFeatures(Global. locus. copy. features[1]); 
for(var j= 0; j « Global. locus. copy. features[1]. length ; j++) { 
Global. locus. copy. features[1][j]. state = OpenLayers. State. INSERT; 
} 
Global. locus. copy. features[1] = []; 


} 
lastPixel = pixel; 
if (Global. locus. flag. copy) { 
Plugins. menu. refresh(); 
Plugins. FLAG. MAP[ M1']- true; 
Plugins. menu. update( ) ; 
Global. locus. flag. copy = false; 
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/* Featruestoppedmoving * / 
Global.locus.meth od.endDrag - function (feature, pixel) ( 
var layers = this. layers || [this. layer]; 
var layer; 
for(var 1= 0; 1< layers. length ; ++1) { 
layer = layers[1]; 
for (iinlayer. selectedFeatures) { 
layer. selectedFeatures[i]. state = OpenLayers. State. UPDATE; 


} 


4) 属性 查看 
属性 查看 是 一 个 常用 的 功能 ,用 于 查看 选中 的 设备 或 者 线路 的 相关 属性 ,在 这 里 以 变 压 
器 属性 查看 为 例 , 实 现 后 的 界面 效果 如 图 7. 4-3 所 示 。 关 键 代 码 如 下 : 


package org. ldw. action; 
import com. opensymphony. xwork2. ActionSupport; 
import org. ldw. service. propertyService; 
import net. sf. json. JSONObject ; 
/* 
* 获取 设备 属性 表单 
*/ 
public class getPropertyAction extends ActionSupport { 
private inttype; 
private Longisbn; 
private LongwellSid; // 工 井 的 静态 1D, A if] FA m JR HE BY (5 A 
private String name; 
private propertyServiceproService; 
private JSONObject result; 
private booleanifByName - false; 


private String clName; // 所 属 线路 

private String startInt; // 起 点 间隔 :标准 有 段 
private String endInt; // 终 点 间隔 :标准 段 
private String startObj; // 起 点 设备 : 标准 段 
private String endObj; // 终 点 设备 : 标准 段 
private String road; // 所 属 道路 

private String well; // 所 属 工 井 : 剖面 
private String well2; 

private String ppSeg; // 所 属 管 沟 段 : 剖面 
private String startBuilding; // 起 始 土建 : 管 沟 线 
private String endBuilding; // 终 点 土建 : 管 沟 线 
private String building; // 土 建 : 中 间接 头 
private String wirecable; // 中 间接 头 


private String pipeline; // 管 沟 线 : 管 沟 段 
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private String containerld; // 间 隔 : 所 属 设备 
private String startTransStation; // 配 电线 路 : 起 点 电站 
public String execute() throwsException { 
if(ifByName)( 
result - proService.getPropertyJson(type, name); 
) elseif(isbn != null) ( 
result = proService.getPropertyJson(type, isbn); 
) eise ( 
result 


null; 
} 
if(result != null) { 
clName = proService. getNameOfCableline(type, result); 
startObj = proService.getNameOfObj(type, result, "startContainer"); 
endObj = proService.getNameOfObj(type, result, "endContainer") ; 
road= proService.getNameOfRoad(type, result); 
well= proService.getNameOfWell(type, result); 
well2 proService.getNameOfWell2(type, wellSid); 
ppSeg= proService.getNameOfPP(type, result); 
startBuilding- proService.getNameOfBuilding(type, result, "startBuilding"); 
endBuilding = proService.getNameOfBuilding(type, result, "endBuilding"); 
building= proService.getNameOfLocateld(type, result, "locationId"); 
wirecable- proService.getNameOfWirecable(type, result); 
pipeline- proService.getNameOfPipeline(type, result); 
containerId= proService.getNameOfElectrical(type, result, "containerId"); 
startTransStation= proService.getNameOfStartTransStation(type, 
result, "startTransStation"); 
) eise ( 
clName = p 


road= ""; 

well = H 

ppSeg- ""; 
startBuilding- ""; 
endBuilding= ""; 
building- ""; 
wirecable- ""; 
pipeline- ""; 
containerld- ""; 
startTransStation- ""; 


} 
return Integer. toString (type); 


} 
<! —- 4&5 WE setter, getter > 
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变电站 基本 属性 

名 称 NOVAS yem ELE M 

SE 120.554431453 Pree 

维度 30.624057073 所 在 类 型 

运行 状态 。 | 设计 M 电压 等 级 。 | 10KV M 

Bem 00 

变电站 其 他 属性 

运行 单位 508 国 

站 址 资产 单位 

运行 编号 GUESS J 

接地 电阻 00 资产 编号 

运行 班组 资产 性 质 

布置 方式 是 否 枢纽 站 | 是 M 
确定 取消 


图 7.4-3 查看 变压器 属性 


5) 设备 添加 

添加 设备 功能 用 于 在 地 图 上 添加 某 种 具体 的 设备 ,实现 后 的 效果 如 图 7. 4-4 所 示 , 该 系 
统 支持 添加 变电站 、 开 关 站 、 变 压 器 、 环 网 柜 、 分 支 箱 、 分 支 接头 、 盘 余 . 中 间接 头 、. 工 井 . 塔 杆 、 
虚拟 工 井 等 常见 的 电力 设施 。 关 键 代码 如 下 : 


var drawArr = [EB ' 开 关 站 ', SERRE, ' 环 网 柜 ', ' 分 支 箱 '， 
' 分 支 接头 Bb, ' 中 间接 头 ', TH, ' 杆 塔 ', "虚拟 工 井 ']; 
Global.locus.draw.number = drawArr. length ; 
var visibleArr = [' 变 电站 ', ' 开 关 站 ', "EFE HIC, ' 环 网 柜 ',' 分 支 箱 '， 
BES AR "中间 接头 ', DOES ' 杆 塔 '， 
' 虚 拟 工 井 ',' 电 缆 ', SPER, ' 虚 拟 管 沟 ', ' 排 管 '， 
' 桥 架 ', ' 沟 道 ',' 直 埋 ', hese, ' 顶 管 ']; 
Global.locus.constant.visible = visibleArr.length ; 
/ 电气 设 备 添加 按钮 / 
for(var i= 0;i« Global. constant. electricalNum; i++ ){ 
Global. locus. draw. controls[i] = new OpenLayers. Control. DrawFeature( 
Global. locus. layers. electricalLayer, OpenLayers. Handler. Point, 
{ 
callbacks: { 
done: function (geometry) { 
var feature = new OpenLayers. Feature. Vector(geometry) ; 
feature. attributes[ 'object_type'] = Global. locus. draw. unitType; 
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feature.attributes['z index'] = Global.constant. unit; 
feature. attributes[ 'x_offset'] = 0; // 设 置 默认 注 记 偏 移 值 
feature.attributes['y offset'] = -15; 
feature.renderIntent - 'default'; 
var proceed - this.layer.events. triggerEvent( 
"sketchcomplete", (feature: feature] 
); 
if(proceed !== false) { 
feature. state = OpenLayers. State. INSERT; 
this. layer. addFeatures([feature]) ; 
this. featureAdded( feature) ; 
this. events. triggerEvent("featureadded", {feature : feature} ); 
} 
Plugins. dialog. show(( 
title : ' 属 性 … 
url : Global. option .URL+ '/getProperty.action', 
obj : feature, 
param : ( 
type : feature.attributes[ object type'] 
} 
Lt 
'success' : function (){ 
var projectTo 7 new OpenLayers. Projection("EPSG:4326"); 
var projectSource = Global. locus. map. getProjectionObject(); 
var feature Clone = feature.clone(); 
featureClone. geonetry. transform(projectSource, projectTo); 
Plugins. dialog. set('#lon', featureClone. geometry. x); 
Plugins. dialog. set('#lat', featureClone. geometry. y); 
Lh 
'subnit': function (e)( 
if( $ ('st feature name').val() ==""){ 
Plugins. dialog. warm(e，' 名 称 不 能 为 空 , 请 填写 后 重新 提交 ', {}); 
Jeise( 
Base. request. insert pro(e, 0); 


Lh 
'cancel' : function (e){ 
e[ 'obj'].destroy(); 


Di 
}, 
create: function (vertex, feature) { 
feature. style = Global. locus. draw. style type; 
this. layer. events. triggerEvent("sketchstarted", {vertex: vertex, feature: feature} ) 
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图 7.4-4 添加 某 种 具体 设备 


7.4.3 设备 管理 模块 实现 


1. 导航 树 模块 的 实现 

导航 树 的 各 节点 是 通过 Ajax 技术 异步 加 载 的 ,系统 初始 化 时 导航 树 只 会 加 载 初始 的 城 
市 节点 ,用 户 根 据 自身 需要 选择 相应 的 父 节 点 加 载 其 逻辑 关系 下 的 子 节点 。 各 节点 的 数据 
信息 是 导航 树 模块 通过 JavaScript 与 业务 逻辑 服务 通信 获得 的 。 

导航 树 的 交互 操作 是 定义 各 个 组 织 节 点 和 实例 节点 的 右键 菜单 ,根据 节点 的 定义 不 同 ， 
构建 菜单 的 功能 也 不 相同 ,主要 是 设备 的 查询 、 增 加 、 修 改 及 删除 功能 以 及 地 图 定位 等 与 
GIS 模块 的 交互 功能 。 导 航 树 功能 的 实现 效果 如 图 7. 4-5 所 示 。 

实现 树 目录 功能 的 关键 代码 如 下 : 


mHR | MA 


/* 


LP LIU 
* 树 目录 及 侧 栏 列 表 服 务 LI Pe LZ 
* 1. 左 侧 树 目录 ee 
* 2. 右 侧 单线 图 包含 的 设备 B rigs 10645 

*/ 日 坊 城 东 118 绪 

th 
public class treeService { chio 1186 | 
" 1 . WFR 1184508824 | 
private String fatherld; 一- 城 永 118 线 (步行 街 1# | 
private String fatherLevel; 一 城 东 118 线 (步行 街 2# 
2 一 城 东 118 线 ( 步 建 T301| 
private String fatherName; --- 城 东 118 线 ( 步 建 T301| 
private String fatherType; 一 城 东 118 线 ( 步 建 T301| 
private TreeCatalogtreeDao; pees EE ee | 


private Static finalString wrongMsg = "ERROR"; 
public void initVar (String id, String n, String lev){ 
if(id != null){ 
String [] array = id.split("-"); 
this. fatherId = array[1]; 
this.fatherType = array[0]; 
this.fatherLevel - lev; 
this.fatherName - n; 
) eise ( 
this. fatherId = null; 
this. fatherType = null; 


图 7.4-5 导航 树 界面 
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this.fatherLevel = null; 
this.fatherName - null; 


) 
/* 
* 获取 父 类 型 
*/ 
private intgetType( )( 
if (fatherLevel. equals("none") ) { 


return 0; 
} else { 
return 1; 
} 
} 
// 获 取 最 终 目 录 数 据 


public String getd ata()( 
return getJsonF().toString (); 
} 
// 获 取 返 回 ISON 数据 
//[(idname: "TONGXIANG', isParent:true, iconSkin:'city'}] 
public JSONArray getJsonF()( 
JSONArray jsa = newJSONArray (); 
intt = this.getType(); 
List < TreeCatalogRecord» aim ; //= treeDao.getTreeCatalog(); 
switch(t) { 
case0 : aim = treeDao. getTreeCatalog( ) ; break; 
casel  : aim = treeDao. getTreeCatalog(Long. parseLong(fatherId), Integer. parseInt 
(fatherType) ) ; break; 
default : aim = treeDao. getTreeCatalog(Long. parseLong(fatherld), Integer. parseInt 
(fatherType) ) ; 
} 
for(inti=0; i<aim.size(); ++i){ 
JSONObject jso = newJSONObject (); 
jso. accumulate("id", aim. get(i).getTypeId() + "-" + aim. get(i).getStatic Id()); 
jso.accumulate("name", aim. get(i).getName()); 
jso. accumulate("isParent", aim. get(i).getParent()); 
jso. accumulate("iconSkin", aim. get(i).getIconSkin()); 
jsa.add(jso) ; 
} 
return jsa; 


} 


2. 查询 定位 功能 的 实现 

系统 需要 通过 导航 树 和 搜索 功能 实现 电力 管线 设备 的 查询 和 定位 ,实现 的 界面 效果 如 
图 7. 4-6 和 图 7. 4-7 所 示 。 导 航 树 实例 节点 的 右键 交互 菜单 提供 设备 的 定位 功能 ,通过 导 
航 树 的 逻辑 关系 查询 到 对 应 设备 后 可 以 将 其 定位 到 地 图 的 中 间 突 出 显示 。 系 统 的 搜索 功能 


308 «|| WebGIS 工 程 项 目 开发 实践 


是 通过 GIS 服务 实现 的 ,可 以 通过 设备 名 字 进 行 模糊 查询 和 通过 设备 经 纬度 精确 查询 。 
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图 7.4-7 系统 的 搜索 功能 


本 系统 的 查询 功能 支持 模糊 查询 和 经 纬度 查询 两 种 方式 。 模 糊 查询 实现 后 的 界面 效果 
如 图 7.4-8 所 示 , 实 现 模糊 查询 功能 的 关键 代码 如 下 : 


/* 模糊 查询 功能 函数 * / 
Global.locus.meth od.vague search = function (text, layerIndex)( 
Global.constant.searchIndex = layerIndex; 
var layer; 
if(layerIndex == 0){ 
layer = ‘electrical’; 


Jeise( 
layer = 'civil engineering'; 
) 
var filter = new OpenLayers. Filter. Comparison( { // 比 较 操作 符 


type: OpenLayers. Filter. Comparison. LIKE, 
property: "name", // 查 询 的 字段 ,需要 根据 图 层 设置 
value: "* "t text t" « " 


n 
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var filter 1 0 = new OpenLayers.Format.Filter.vl 0 0(); 
var tempXML - new OpenLayers. Format. XML(); 
var xmlPara = tempXML.write(filter 1 O.write(filter)); 
var dataXML = Global. locus. constant. originXML 
+ '<wfs:QuerytypeName = "OpenGIS:geo_'+ layer + '">' 
+ "/n"// 查 询 的 图 层 ,需要 设置 
+ '< wfs:Property name > OpenGIS:name </wfs:Property name >' 
+ '/n'// 查 询 的 属性 字段 ,需要 设置 
+ '<wfs:Property name OpenGIS:object type </wfs:Property name >' 
+ '/n'// 查 询 的 属性 字段 ,需要 设置 
+ '<wfs:Property name» OpenGIS:Static _id </wfs:Property name>' 
+ '/n'// 查 询 的 属性 字段 ,需要 设置 
+ '<wfs:Property name > OpenGIS:geometry data </wfs:Property name>' 
+ '/n'// 查 询 的 几何 字段 ,需要 设置 
+ xnlPara 
+ '</wfs:Query>' + "/n" 
+ '</wfs:GetFeature>'; 
var request = OpenLayers. Request.POST({ 
url: "http://" + Global. option . ip + ":8081/geoserver/wfs", 
data : dataXML, 
callback : Global. locus. meth od. vague_search_handler 
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图 7.4-8 模糊 查询 演示 
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除了 模糊 查询 ,系统 还 需要 实现 经 纬度 查询 功能 ,在 查询 框 中 输入 经 度 和 纬度 值 ,可 实 
现 经 纬度 查询 功能 ,实现 效果 如 图 7. 4-9 所 示 , 经 纬度 查询 的 关键 代码 如 下 : 


/* 按 经 纬度 查询 功能 * / 
Global.locus.meth od.cr search = function (text){ 
var values = text.split(","); 
if (values. length !== 2) { 
Plugins. dialog. show(( 
‘title’: ' 错 误 信 息 '， 
"text':' 请 按照 x,y 的 形式 输入 " 
Lt 
'subnit': function (e)( 
Plugins. dialog. remove() ; 
} 
Di 
values - null; 
) eise ( 
values[0] = parseFloat(values[0]); 
values[1] = parseFloat(values[1]); 
if (isNaN(values[0]) || isNaN(values[1])) ( 
Plugins. dialog. show(( 
‘title’: ' 错 误 信息 '， 
'text': ' 输 入 的 x, y 必须 是 数字 ' 
Lt 
'submit': function (e)( 
Plugins. dialog. remove() ; 
) 
Di 
values = null; 
) eise( 
var foundPosition = new OpenLayers. LonLat(values[0], values[1]). transforn( 
new OpenLayers. Projection("EPSG:4326"), 
Global. locus. map. getProjectionObject() 
n 
Global. locus. map. setCenter(foundPosition, Global. constant. zoomLevel); 


} 

3. 资源 管理 功能 的 实现 

资源 管理 模块 需要 管理 电气 设备 ,土建 设备 ,业务 图 图 形 等 所 有 资源 的 属性 和 空间 数 
据 , 其 中 资源 管理 模块 的 空间 数据 管理 在 表现 层 通 过 OpenLayers 接口 利用 GeoServer 服务 
实现 ,资源 管理 属性 数据 的 管理 通过 调用 服务 器 端的 各 种 Action 接口 实现 。 资 源 管理 模块 
主要 包括 设备 的 查询 ,增加 ,修改 以 及 删除 操作 ,可 以 在 导航 树 模 块 上 选择 相应 的 节点 进行 
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图 7.4-9 经 纬度 查询 


资源 管理 的 操作 ,也 可 以 在 地 图 进行 交互 操作 时 进行 资源 管理 。 下 面 以 电缆 段 的 查询 操作 
为 例 ,介绍 资源 管理 模块 的 详细 实现 流程 。 当 资源 管理 模块 的 查询 接口 被 调用 时 ,系统 与 业 
务 逻 辑 服务 通信 获得 设备 的 信息 ,然后 在 前 台 以 对 话 框 的 形式 显示 ,资源 管理 模块 与 业务 好 
辑 服务 的 时 序 图 如 图 7. 4-10 所 示 。 


资源 管理 模块] 。 [getPropertyAction] — [ pmoperyService | — [ propenypao | 

,要 查询 设备 的 static_id! I 

! | 
i 


filobject type 


zetPropert; 
eee Select) 


调用 返回 


调用 返回 


Wire segment.jsp 


i D 


图 7.4-10 ” 线 缆 段 查询 功能 时 序 图 


4. 电缆 段 入 沟 功 能 实现 

电线 段 入 沟 操 作 是 电力 管线 管理 的 必要 流程 之 一 ,系统 通过 电缆 段 入 沟 可 以 建立 电缆 
段 和 管 沟 段 之 间 的 逻辑 关系 。 实 现 人 沟 功 能 的 界面 如 图 7. 4-11 Bro ,系统 通 过 导航 树 右 键 
交互 菜单 请 求 电线 段 入 沟 , 在 GIS 地 图 中 可 视 化 选择 入 沟 的 管 沟 段 。 入 沟 完 成 后 ,GIS 服务 
可 以 重新 演 染 电缆 段 在 地 图 上 的 走向 和 位 置 。 
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图 7.4-11 电缆 段 人 沟 功 能 


7.4.4 管线 业务 模块 实现 


电力 管线 业务 模块 是 系统 的 电力 业务 功能 ,主要 维护 电气 设备 的 电力 连接 关系 以 及 电 
Mite GIS 地 图 和 工 井 内 部 的 位 置 和 走向 。 管 线 业务 模块 由 配 电 线路 的 轨迹 图 .单线 图 、 接 
线 图 和 工 井 立 视 图 四 部 分 构成 。 

1. 配 电线 路 轨迹 图 

配 电 线路 的 轨迹 图 实现 界面 如 图 7. 4-12 as ,通过 导航 树 的 配 电 线路 右键 菜单 提供 请 
求 接口 。 系 统 获 得 请 求 后 与 业务 馆 辑 服务 通信 获取 此 配 电线 路 下 电气 设备 和 土建 设备 , 然 
后 通过 GIS 服务 将 查询 到 的 设备 显示 ,并 在 GIS 地 图 上 展示 配 电线 路 的 轨迹 图 。 另 外 ,用 
户 可 以 使 用 图 层 选择 控件 选择 显示 的 设备 图 层 , 单 独 查 看 电气 设备 轨迹 和 土建 设备 轨迹 。 
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图 7.4-12 配 电线 路 轨迹 图 
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2. 配 电线 路 单线 图 

配 电线 路 单线 图 的 实现 界面 如 图 7. 4-13 所 示 , 它 提供 了 可 视 化 智能 化 管理 配 电线 路 单 
线 图 的 工具 。 单 线 图 模块 提供 了 单线 图 的 查看 和 编辑 功能 ,并 且 通 过 右 侧 菜单 栏 可 以 实现 
单线 图 中 的 设备 在 GIS 地 图 上 的 定位 。 系 统 提供 了 简单 的 图 形 编辑 菜单 栏 ,电网 管理 人 员 
可 以 对 单线 图 中 的 设备 、 线 路 属性 、 位 置 和 连接 关系 进行 编辑 ,以 提高 单线 图 数据 的 准确 性 。 
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图 7.4-13 配 电线 路 单线 图 


单线 图 管理 包括 单线 图 绘制 功能 .单线 图 存储 功能 。 

1) 单线 图 绘制 功能 

从 目录 树 上 拖 动 设备 到 单线 图 , 单 击 画 线 按钮 ,绘制 单线 图 ; 还 可 删除 某 部 分 图 形 ( 其 
至 全 部 ) ,并 重新 绘制 单线 图 。 

单线 图 绘制 功能 关键 代码 如 下 : 


Global. line. meth od. init = function (initVar )( 
Global. constant. currentMap = 1; 
OpenLayers. ProxyHost = "cgi/proxy.cgi?url ="; 
var extent = new OpenLayers. Bounds( - 20, — 20,20,20); 
Global. line. draw. pointStyleMap = Global. style. lineDiagramStyle; 
Global. line.map = new OpenLayers. Map( 'map2') ; 
Global. line. map. div. oncontextmenu = function () { return false; }; 
Global. line. meth od. drawUnit = function (name, type, sid) { 
Global. line. unit.name = name; 
Global. line. unit.typeID = type; 
Global. line. unit. Static Id = sid; 
switch(type) { 
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case "1010201" : Global. line. draw. style type = Global. style. form[0];break; 
case "1010202" : Global. line. draw. style type = Global. style. form[1]; break; 
case "1010203" : Global. line. draw. style type = Global. style. form[2]; break; 
case "1010204" : Global. line. draw. style type = Global. style. form[3]; break; 
case "1010205" : Global. line. draw. style type = Global. style. form[4]; break; 
case "1010208" : Global. line. draw. style type = Global. style. form[7]; break; 
case "1020101" : Global. line. draw. style type = Global. style. form[8]; break; 
case "1020102" : Global. line. draw. style type = Global. style. form[9]; break; 
case "1010402": Global. line. draw. style type = Global. style. form[11];break; 
case "1010403": Global. line. draw. style type = Global. style. form[ 12]; break; 

} 

if(type == "1010402" || type == "1010403"){ 
Global. line. meth od. controlRelease( ) ; 
Global. line. draw. lineControl. activate() ; 

}else{ 
Global. line. meth od. controlRelease(); 
Global. line. draw. pointControl. activate( ); 


} 
单线 图 关联 功能 关键 代码 如 下 : 


/* 
* 获取 单线 图 侧 栏 数据 
*/ 
public JSONArray getSideBarJson()( 

JSONArray jsa 7 newJSONArray (); 

LongSId = Long. parseLong(fatherId) ; 

List < TreeCatalogRecord» aimswitch = treeDao. getTreeCatalog(SId, 10102020); 

for(inti=0; i<aimswitch. size(); **i)( 
JSONObject jso = newJSONObject (); 
jso. accumulate("sid", aimswitch. get(i).getStatic Id()); 
jso.accumulate("type", aimswitch.get(i).getTypeld()); 
jso.accumulate("name", aimswitch.get(i).getName()); 
jsa. add( jso) ; 

} 

List < TreeCatalogRecord>aimbranch = treeDao. getTreeCatalog(SId, 10102050); 

for(inti=0; i<aimbranch. size(); **i)( 
JSONObject jso = newJSONObject (); 
jso.accumulate("sid", aimbranch.get(i).getStatic Id()); 
jso.accumulate("type", ainbranch.get(i).getTypeId()); 
jso.accumulate("name", aimbranch. get(i).getName()); 
jsa. add( jso); 

} 

List < TreeCatalogRecord>aimhw = treeDao. getTreeCatalog(SId, 10102040); 

for(inti=0; i<aimhw. size(); ++i){ 
JSONObject jso = newJSONObject (); 
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jso.accumulate("sid", aimhw. get(i).getStatic Id()); 
jso.accumulate("type", aimhw.get(i).getTypeld()); 
jso. accumulate("name", aimhw.get(i).getName()); 
jsa. add( jso) ; 
} 
List < TreeCatalogRecord>aimtrans = treeDao. getTreeCatalog(SId, 10102030); 
for(inti=0; i<aimtrans. size(); **i)( 
JSONObject jso = newJSONObject (); 
jso. accumulate("sid", aimtrans.get(i).getStatic Id()); 
jso. accumulate( "type", aintrans.get(i).getTypeId()); 
jso. accumulate("name", aimtrans.get(i).getName()); 
jsa. add( jso); 
} 
return jsa; 
} 
2) 单线 图 存储 功能 
将 上 述 过 程 中 绘制 的 图 形 保存 到 数据 库 ,并 在 单线 图 目录 树 中 自动 显示 ,用 户 选中 该 图 
后 ,可 实现 自动 绘制 。 
3. 设备 接线 图 
设备 接线 图 功能 的 实现 界面 如 图 7. 4-14 所 示 ,描绘 了 单 电气 设备 内 的 配 线 方式 。 系 统 
在 导航 树 中 的 电气 设备 右键 菜单 提供 了 接线 图 的 查询 接口 ,接线 图 模块 通过 OpenLayers 
调用 GIS 服务 在 前 台 演 染 出 要 查询 设备 的 接线 图 ,同时 通过 业务 逻辑 服务 查询 此 设备 的 好 
辑 连 接 关系 获取 相应 的 设备 信息 。 另 外 ,接线 图 模块 提供 了 接线 图 的 编辑 功能 ,电网 管理 人 
员 可 以 对 设备 的 单线 图 进行 维护 。 
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4. 工 井 立 视图 

工 井 立 视图 的 功能 实现 如 图 7. 4-15 所 示 , 它 实现 了 电缆 在 地 下 电力 管道 中 位 置 的 可 视 
化 。 立 视图 模块 提供 工 井 剖 面 图 的 查询 与 编辑 功能 ,同时 可 以 查看 工 井 测绘 俯视 图 。 并 且 
通过 查看 剖面 图 及 剖面 信息 ,电网 施工 人 员 可 以 查询 电缆 的 埋 深 ,在 工 井 中 的 走向 和 在 管 沟 
段 中 的 位 置 等 关键 信息 ,直观 可 视 化 的 操作 可 以 降低 电力 事故 发 生 的 概率 。 另 外 ,管理 人 员 
可 以 通过 剖面 图 编辑 ,电缆 穿孔 等 操作 维护 工 井 立 视图 ,确保 立 视图 数据 的 准确 性 。 
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图 7.4-15 工 井 立 视 图 
前 面 管理 模块 用 例 图 如 图 7. 4-16 所 示 。 
用 户 
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图 7.4-16 剖面 管理 模块 
剖面 管理 模块 工具 栏 如 下 : 
NE &eoeosg 


CD. HS I FEST US TE ARE DEPORTE. 
(2) 管 沟 面 尺寸 调整 : 在 图 上 拉动 。 
(3) 管 孔 添加 : 圆 形 ,有 若干 固定 尺寸 可 选 。 
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COD 管 孔 设置 : 可 以 单个 或 多 选 管 孔 批量 移动 或 改变 直径 等 属性 ,直径 在 若干 固定 尺 
寸 中 选择 。 

O) 管 孔 排列 生成 : 输入 管 孔 尺寸 (选择 ) 行 数列 数 、 横 向 间隔 距离 、 纵 向 间隔 距离 ， 
在 图 上 单 击 ,以 单 击 处 为 左上 角 , 生 成 规则 管 孔 。 

(6) 线路 符号 添加 : 线路 符号 中 间 显示 电压 等 级 ,线路 符号 尺寸 可 以 在 车 干 固定 尺寸 
中 选择 。 

CD 线路 标注 添加 : 单 击 剖面 ,再 在 图 上 单 击 ,自动 生成 剖面 的 线路 标注 表格 。 

(8) 通信 电缆 符号 添加 。 

(9) 支架 添加 。 

(10) 管 孔 支 架 批量 移动 : 点 选 或 框 线 多 重 选择 .点 选 多 重复 制 加 CTRL f£. 

QD 管 孔 支 架 复制 : 管 孔 与 支架 。 

(12) 剖面 复制 : 在 图 中 选择 一 个 管 沟 剖 面 , 作 为 复制 源 。 

(13) 剖面 粘贴 : 在 图 中 某 一 位 置 单 击 ,以 该 点 为 左上 角 将 剖面 复制 源 粘贴 到 该 位 置 。 

1) 剖面 绘制 

绘制 某 一 具体 工 井 剖面 界面 如 图 7. 4-17 所 示 ,需要 填 人 剂 面 编号 .剖面 长 .剖面 宽 3 个 


图 7.4-17 绘制 工 井 剖面 


绘制 工 井 剖面 的 关键 代码 如 下 : 


* 添加 剖面 函数 * / 

Global. locus. meth od. addProfile = function (feature){if(feature. attributes[ 'object_type'] 
!- '1020101 &&feature.attributes[ 'object_type'] != '1020103'){ 
Plugins. dialog. show( { 

‘title’: ' 错 误 信息 '， 
'text': ' 请 选择 工 井 ' 
Li 
'subnit': function (e){ 
Plugins. dialog. remove( ) ; 
} 
D; 
}else{ 
if(!Global. locus. flag. addProfilePpSegment) { 
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Global. locus. profile. unit = feature. attributes[ 'Static id']; 


Global. locus. flag. addProfilePpSegment = true; 


Global. locus. flag. addProfileWell = false; 


} 


2) 管 孔 添加 
管控 添加 界面 如 图 7. 4-18 所 示 ,需要 输入 行 数 、 列 数 . 起 始 横 坐 标 、 埋 深 、 行 间距 、 列 间 


HE ILEI .起 始 编号 8 个 参数 。 


图 7.4-18 管控 添加 


a) 添加 、 更 新 单个 管 孔 功 能 。 
/* 添 加、 更 新 单个 管 孔 功能 函数 * / 


Global. locus. meth od.drawPipeHole = function (feature, holeFeature){ 


var Ppfeature; 
for(var i= 0;i<Global. locus. layers. buildingLayer. features. length ;i++){ 
if(Global.locus.layers.buildingLayer.features[i].attributes['Static id' 
feature. attributes[ 'pp_segment_id']) { 
Ppfeature = Global. locus. layers. buildingLayer. features[ i]; 


break; 


} 
if (Ppfeature) { 
OpenLayers. Request. GET( { 
url: "getPropertyJson. action?type = " + Ppfeature. attributes[ ‘object_type'] 
+ "&Static Id - " + Ppfeature. attributes[ 'Static id'], 
success: ppSegmentProperty_success, 
failure: (function (e)( 
Plugins. dialog. show(( 
‘title’: "错误 信息 … 
'text': e. responseText 
Lt 
'submit': function (e)( 
Plugins. dialog. remove() ; 


) 
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Di 
) 
) 
ni 
Jelse( 
Plugins. dialog. show(( 
‘title’: "错误 信息 … 
'text': "请 检查 剖面 所 属 管 沟 是 否 存在 或 者 被 隐藏 ! 
Lt 
'subnit': function (e)( 
Plugins. dialog. remove( ) ; 
} 
Di 


(2) 添加 规则 管 孔 功能 函数 。 


/ 添加 规则 管 孔 功能 函数 * / 
Global. locus. meth od.drawRegularPipeHole = function (feature){ 


var Ppfeature; 
for(var i= 0;i« Global. locus. layers. buildingLayer. features. length ; it*)( 
if(Global.locus.layers.buildingLayer.features[i].attributes[ Static id'] == 
feature.attributes['pp segment id'])( 
Ppfeature = Global. locus. layers. buildingLayer. features[i]; 
break; 
} 
} 
if(Ppfeature) { 


OpenLayers. Request. GET( { 
url: "getPropertyJson. action?type = " + Ppfeature. attributes[ object type'] 


+ "&Static Id=" + Ppfeature. attributes[ 'Static id'], 
success: ppSegmentProperty_success, 
failure: (function (e) { 
Plugins. dialog. show( { 
‘title’: ' 错 误 信息 '， 
'text': e. responseText 
Lt 
'subnit': function (e) { 
Plugins. dialog. remove( ) ; 
} 
n; 
} 
) 
n; 
Jeise( 
Plugins. dialog. show({ 
title': ' 错 误 信 息 '， 
'text': ' 请 检查 剖面 所 属 管 沟 是 否 存 在 或 者 被 隐藏 ! 
Li 


320 Á| WebGIS 工 程 项 目 开发 实践 


'submit': function (e)( 
Plugins. dialog. remove() ; 


hs 
) 
(3) 添加 支架 。 
添加 支架 功能 界面 如 图 7. 4-19 所 示 , 需 要 填 人 建造 单位 .类 型 .材料 .数量 间隔、 规格 
等 参数 。 


支架 的 属性 
建造 单位 类 型 支架 x 
材料 ĉa v 数量 
间隔 (mm) 规格 
注 长 (mm)x 宽 (mm)x 厚 (mm) 
确定 取消 


图 7.4-19 添加 支架 


添加 支架 功能 关键 代码 如 下 : 
/* 添加 支架 功能 函数 * / 


Global. locus. meth od. drawBrackets = function (feature) { 
var Ppfeature; 
for(var i=0;i< Global. locus. layers. buildingLayer. features. length ; i++) { 
if(Global. locus. layers. buildingLayer. features[i].attributes['Static id'] == 
feature. attributes[ 'pp_segment_id']) { 
Ppfeature = Global. locus. layers. buildingLayer. features[ i]; 
break; 


} 
if (Ppfeature) { 
OpenLayers. Request. GET( { 
url: "getPropertyJson. action?type = " + Ppfeature. attributes[ object type'] 
+ "&Static Id - " + Ppfeature. attributes[ 'Static id'], 
success: ppSegmentProperty_success, 
failure: (function (e)( 
Plugins. dialog. show({ 
‘title’: "错误 信息 … 


'text': e. responseText 


'subnit': function (e)( 
Plugins. dialog. remove(); 


第 7 章 ”城市 地 下 电力 管线 GIS 系 统 > 321 


} 
) 
D; 
}else{ 
Plugins. dialog. show(( 
‘title’: ' 错 误 信息 '， 
'text':' 请 检查 剖面 所 属 管 沟 是 否 存在 或 者 被 隐藏 !' 
Li 
'submit': function (e){ 
Plugins. dialog. remove() ; 
} 
Di 
) 


7.4.5 其 他 管理 模块 实现 


系统 的 其 他 管理 功能 模块 也 是 系统 相关 的 辅助 功能 模块 ,主要 包括 用 户 管理 功能 和 数 
据 的 批量 导入 两 部 分 。 

1. 用 户 管理 

城市 地 下 电力 管线 管理 系统 允许 电网 管理 人 员 进 入 系统 对 城市 电力 管 网 进行 管理 。 当 
用 户 输入 正确 的 用 户 名 和 密码 后 便 会 进入 系统 主页 面 ,加 载 系统 的 各 个 功能 模块 。 系 统 提 
供 了 添加 用 户 ,查看 用 户 、 修 改 密码 等 常用 的 用 户 管理 功能 ,并 且 只 有 管理 员 用 户 具有 添加 、 
删除 普通 用 户 的 权限 。 

1) 注册 页 面 

在 安全 注册 与 登录 操作 过 程 中 严格 验证 表单 内 容 , 以 提高 网 站 的 安全 性 ,防止 非法 用 户 
进入 网 站 。 本 系统 中 注册 页 面 为 addUser. jsp, 如 图 7. 4-20 所 示 。 


用 户 管理 | 添加 用 户 。 修改 空 码 | 导入 Excel 
账户 基本 信息 ( 必 填 ) 
登录 名 * 123 
Rx. 
Rus | SAAMA " 
LE 
mien 
了 手机 号 
LI 
| 提交 | 


图 7.4-20 用 户 注册 页 面 
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实现 注册 表单 页 面 的 关键 代码 如 下 : 


< s: include value = "commonMenu. jsp"></s:include> 


< div class = "clear"></div> 


<div class = "system_box"> 
< s:form action = "addUser" theme = "simple" meth od= "post" enctype = "multipart/form - data"> 
<table class = "system- table "> 


«tr»«th colspan = "2"> 账 户 基本 信息 ( 必 填 )</th></tr> 
<tr> 

<td width = "80px"»3X£ 3E 4% * </td> 

<td width = "340px"> 

<s:textfield theme = " simple" name = " user. userName" cssClass = " stri290" 
reqiured = "true" value =""/> 


</td> 

</tr> 

<tr> 
«td width = "80px"> 用 户 密码 * </td> 
«td width = "340px"» 


<s:password theme = "simple" name = "user. userPassword " cssClass = "psdi290" 
value ="" /> 
</td> 
</tr> 
<tr> 
«td width = "80px"> 用 户 组 别 * </td> 
<td width = "340px"> 
< selectclass = "select1" name = "user. userLevel"> 
<option value = "0"> 超 级 管理 员 </option > 
< option value = "1"> 管 理 员 </option> 
<option value = "2" selected > 普通 用户 </option> 
</select ></td> 
</tr> 
<tr>< th colspan = "2"> 用 户 个 人 信息 ( 选 填 )</th></tr> 
<tr> 
«td width = "80px"> 真 实 姓 名 </td> 
«td width = "340px"» 


<s: textfield theme = " simple" name = " user. userRealName" cssClass = " 
stri290" value = ""/» 
</td> 
</tr> 
<tr> 


<td width = "80px"> 手 机 号 </td> 
<td width = "340px"» 
«s:textfield theme = "simple" name = "user. userMobile" cssClass = "stri290" 
value= ""/» 
</td> 
</tr> 
<tr> 
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«td width = "80px"> 邮 箱 </td> 
«td width = "340px"> 
< s: textfield theme = "simple" name = "user. userEmail" cssClass = "stri290" 
value = ""/» 
</td> 
</tr> 
<tr> 
<td width = "80px"></td> 
<td width = "340px"> 
< input type = "submit" class = "system— button" value = "提交 "/> 
</td> 
</tr> 
</table> + 电力 信息 管理 系统 seta 
</s:form> 


2) 登录 页 面 

城市 地 下 电力 管线 管理 系统 允许 电网 管理 人 员 
进入 系统 对 城市 电力 管 网 进行 管理 ,图 7. 4-21 为 用 
户 登录 界面 ,也 是 系统 的 默认 首页 。 

登录 系统 需要 验证 用 户 输入 的 用 户 名 和 密码 是 
否 正确 ,用 户 名 和 密码 正确 则 进入 系统 ,用 户 名 和 密 ALA Ser 
码 不 全 正确 则 给 予 相应 的 提示 ,整个 登录 过 程 的 验证 流程 如 图 7. 4-22 所 示 。 


显示 错误 信息 


显示 错误 提示 


用 户 登 录 I > 正确 < 是 一 | 显示 正确 提示 


图 7.4-22 登录 过 程 验证 的 流程 


前 台 与 后 台 的 登录 验证 方法 基本 一 致 ,只 是 前 台 登 录 保 存 的 是 登录 的 用 户 信息 ,后 台 登 
录 保 存 的 是 登录 系统 的 管理 员 基本 信息 。 


前 台 与 后 台 的 登录 页 面 代码 方式 相同 ,以 前 台 登 录 页 面 为 例 , 其 关键 代码 如 下 : 


< s:form action = "login" meth od = "post" enctype = "multipart/form - data"> 
< inputname = "mode" type = "hidden" value = "check" 
< s:textfield label = "JH P! /&" nane = "nane" cssClass = "str" /> 
< s:password label = "密码 " name = "password " /> 
< s:subnit value = "登录 "/> 
</s:form> 
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在 登录 验证 的 过 程 中 通过 页 面 中 获取 的 用 户 名 和 密码 作为 查询 条 件 在 用 户 信息 表 中 查 
找 条 件 匹配 的 用 户 信息 ,如 果 往 返 的 结果 集 不 为 空 ,说 明 验 证 通过 ; 反之 失败 。 前 台 登 录 验 
证 方法 关键 代码 如 下 : 


public class loginAction extends ActionSupport { 
private String mode; 
private String name; 
private String password ; 
private loginService loginService; 
public String execute() throws Exception { 
if(mode. equals("login"))( 
return mode; 
} 
// 注 销 登 录 
if(mode. equals("loginout"))( 
Mapsession = ActionContext. getContext().getSession(); 
session. remove("userInfo"); 
return "loginout"; 
} 
// 登 录 检 查 
if(mode. equals("check"))( 
if(name.equals(""))[ 
addFieldError("name", "ii AP 4"); 
return INPUT; 
) 
if(password .equals(""))( 
addFieldError("password "，" 请 填写 密码 ") ; 
return INPUT; 
) 
intflagLogin = -1; 
flagLogin = loginService. checkAccount(name, password ); 
switch(flagLogin)( 
case0 :addFieldError("name", "用 户 名 不 存在 "); 
case - 1:addFieldError("password "，" 密 码 错误 ") ; 
} 
if(hasErrors())( 
return INPUT; 
) eise ( 
Mapsession = ActionContext. getContext().getSession(); 
session. put("userInfo", loginService. getUserInfo()); 
return SUCCESS; 


return SUCCESS; 
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3) 修改 密码 
修改 用 户 密码 的 界面 如 图 7. 4-23 所 示 。 


用 户 管理 添加 用 户 [cil 导入 Excel 


BEE: 
KER: 


图 7.4-23 修改 用 户 密码 的 界面 


实现 修改 密码 功能 的 关键 代码 如 下 : 


< s:form action = "addUser" cssClass = "system - table " meth od = "post" enctype = "multipart/ 
forn - data"> 
< table class = "system - table "> 

<tr><th colspan- "2"> 修 改 密码 </th></tr> 

< input type = "hidden" name = "mode" class = "str" value = "editPsd"/» 

«tr» 
«td width = "80px"> 旧 密码 </td> 
«td width = "340px"» 

< s: password name = "oldPsd" cssClass = "psdi290" reqiured = "true" value = ""/» 
</td> 

</tr> 

<tr> 
<td width = "80px"> 新 密码 </td> 
«td width = "340px"> 

< s: password nane = "newPsd" cssClass = "psdi290" reqiured = "true"value = ""/» 
</td> 

</tr> 

<tr> 
<td width = "80px"></td> 
«td width = "340px"> 

< input type = "submit" class = "system— button" value = "提交 "/> 

</td> 

</tr> 

</table> 
</s:form> 


2. 数据 的 批量 导入 

数据 的 批量 导入 功能 以 Excel 文件 形式 批量 导入 电力 管 网 的 设备 的 属性 信息 , 它 有 效 
地 避免 人 工 输入 设备 数据 造成 的 可 靠 性 和 效率 低下 的 问题 。 由 于 系统 属性 和 空间 数据 库 的 
一 致 性 ,批量 导入 模块 在 属性 数据 库 导 入 时 会 增加 对 应 的 空间 数据 库 记 录 。 

数据 的 批量 导入 模块 时 序 图 如 图 7. 4-24 所 示 , 通 过 业务 逻辑 服务 的 uploadExcelAction 将 
前 端 文件 上 传 到 服务 器 端 。importExcelService 使 用 jxl 类 库 解析 Excel 文件 中 的 记录 ,并 
将 其 通过 DAO 接口 保存 到 属性 和 空间 数据 库 中 。 
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文件 上 传 模 块 uploadExcelAction impostExcelService| y 3 


导入 文件 类 型 及 文件 | | 
ImportExcel() " i 
SaveObject() 


返回 导入 结果 


Action 返 回 


图 7.4-24 数据 导入 功能 时 序 


导入 excel 文件 功能 的 关键 代码 如 下 : 


< s: include value = "commonMenu. jsp"></s:include> 
« div class = "clear"></div> 
< div class = "system box"» 
< s:form action= "uploadsExcel" cssClass = "system - table " meth od = "post" enctype =" 
nultipart/form - data"> 


«tr» 
«s:filelabel- "5 A X ff" name = "upFile" cssClass = "i290"></s:file> 
< s: token /> 
<tr> 
<td class = "td Label"> 文 件 类 型 </td> 
<td> 
< select name = "type" class = "i290select1"> 
"survey"> 测 绘 层 </option> 
well"> 电 缆 井 </option> 
joint"> 电 缆 接头 </option> 
wire"> 电 缆 段 </option> 
< option value = "remainder"> 电 缆 盘 余 </option> 
<option value = "ele"> 电 气 设备 </option> 
</select> 
</td> 
</tr> 
< s:subnitvalue = "上传 导入" cssClass = "system - button"></s: submit > 
</s:form> 


导入 功能 用 到 了 一 些 实体 类 ,下 面 是 实现 的 关键 代码 : 


OO III III III 


* FA excel 数据 服务 

* 1. 导 入 

美美 关 关 关 闪 关 关 关 六 关 关 尖 关 六 关 关 关 关 关 关 关 美美 关 关 关 关 关 关 / 

public class import ExcelService { 

// 上 传 路 径 
private String upPath ; // = ServletActionContext. getServletContext() . getRealPath("/uploads" ); 
// 模 板 excel 路 径 
private String tmpPath ; //= ServletActionContext. getServletContext ( ). getRealPath( "/WEB — 


INF/classes/org/resource/excelXML") ; 
// 目 标 文件 
private FileupFile; 
private SurveyDataImport import Dao; 
private ContainerDatalImport import DaoEle; 
private WirecableImport import DaoWirecable; 
private InsertObjectByFileimport Dao0bj; 
private intcountFinish; 
private intcountAll; 
private List < String> errInfo; 
public import ExcelService()( 
} 
public intimport Excel(String type) { 
if (type. equals("survey")) { 
return import Survey(); 
} elseif (type. equals("well"))( 
import Well(); 
return 1; 
} elseif(type. equals("joint"))( 
import Joint(); 
return 1; 
} eiseif(type. equals("wire"))( 
import Wirecable(); 
return 1; 
) elseif(type. equals("remainder"))( 
import Remainder(); 
return 1; 
} eiseif(type. equals("ele"))( 
import Ele(); 
return 1; 
} 
return 1; 
} 
/* 
* FAWAZ 
*/ 
public int import Survey()( 
try{ 
intres import Dao. surveyDataImport (upFile); 
if(res != - 1)( 
countFinish = import Dao.getCountFinish(); 
countAll= import Dao.getCountAll(); 
errInfo= import Dao. getErrInfo() ; 


} 
return res; 
}catch(Exceptione) { 
return -1; 
} 
} 
/* 
* 导 和 人 电气 设备 
*/ 
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public void import Ele()( 
try{ 
import DaoEle.containerDataImport (upFile); 
countFinish = import DaoEle.getNumImport ed(); 
countAll- import DaoEle.getNumSun(); 
errinfo- import DaoEle.getErrInfo(); 
}catch(Exceptione) { 
} 
} 
/* 
* 导 和 人 电缆 段 
*/ 
public void import Wirecable()( 
try{ 
import DaoWirecable. wirecableImport (upFile); 
countFinish = import DaoWirecable. getCountFinish(); 
countAll = import DaoWirecable. getCountAll(); 
errInfo= import DaoWirecable. getErrInfo( ); 
)catch(Exceptione)( 
//return - 1; 
} 
} 
/* 
* FAIH 
*/ 
public void import Well(){ 
try{ 
import DaoObj. insertObjectByFile ( upFile, newFile ( ServletActionContext. 
getServletContext(). getRealPath ("") + "VV WEB — INF \ \ classes V V org \ V resource VV 
excel XML\\PdEwPtWell. xn1")) ; 
countFinish = import Dao0bj.getCountFinish(); 
countAll = import DaoObj. getCountAl1() ; 
errInfo = import Dao0bj.getErrInfo(); 
}catch(Exceptione) { 
e. printStackTrace( ) ; 
} 
} 
/* 
* 导 人 中间 接头 
*/ 
public void import Joint(){ 
try{ 
import Dao0bj. insertObjectByFile ( upFile, newFile ( ServletActionContext. 
getServletContext(). getRealPath ("") + "\\ WEB — INF\\classes \ V org \ \ resource \ \ 
excel XML\\, 

PdElCnIntermediateJoint. xml") ); 
countFinish = import Dao0bj.getCountFinish(); 
countAll = import Dao0bj.getCountAll(); 
errinfo- import Dao0bj.getErrInfo(); 

}catch(Exceptione) { 
e. printStackTrace(); 
} 
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* FARR 
*/ 
public void import Remainder(){ 
try{ 
import Dao0bj. insertObjectByFile ( upFile, newFile ( ServletActionContext. 
getServletContext(). getRealPath ("") + "VV WEB - INF\\classes\\org\\resource\\ 
excel XML\\ 
PdE1CnCabledrumRemainder. xml") ) ; 
countFinish = import Dao0bj.getCountFinish(); 
countAll = import DaoObj. getCountAll(); 
errInfo= import Dao0bj.getErrInfo(); 
}catch(Exceptione) { 
e. printStackTrace( ) ; 


) 


7.5 系统 发 布 
7.5.1 创建 工程 


1. 建立 名 为 TONGXIANG 的 Web 工程 
首先 进入 计算 机 并 启动 Eclipse, 然 后 按照 下 面 的 步骤 创建 一 个 Web 工程 。 
CD 在 新 增 项 目 对 话 框 中 选择 “Dynamic Web Project”, 如 图 7. 5-1 所 示 。 


Edit Navigate Search Project Tomcat Run Window Help —- 


New Alt+Shifte +| iil JPA Project -0-4-37 
Open File... Enterprise Application Project. | | 
Close Cti«w. 
Close All CtrieShiftew * 
Save Cul+s z 
Save As- a 
Save All Ctrl + Shift+S ri 
Revert 
6 
Move.. 区 
[7| Rename. La 
Ë) Refresh 5 |g 
Convert Line Delimiters To les 
Print. Cw? |O 
Switch Workspace. »|ri 


a 


图 7.5-1 新 增 项 目 对 话 框 
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(2) 单 击 Next 按钮 ,在 “Projectname” 中 输入 工程 名 "TONGXIANG”, 设 定 “Dynamic 
Web Module Version”( 不 同 的 Dynamic Web Module Version 对 应 生成 的 工程 web. xml 不 
一 样 ; Web 组 件 版 本 不 向 下 兼容 ; Tomcat6 一 般 对 应 于 2.4/2. 5. Tomcat? 对 应 于 3.0) ,如 
图 7.5-2 所 示 。 


Dynamic Web Project 
Create a standalone Dynamic Web project or add it to a new or existing Enterprise Application. 


Location: [EAworkspace\TONGXIANG [_ Browse... 


Target runtime 


The default configuration provides a good starting point. Additional facets can ster be installed to add 
new functionality to the project. 

EAR membership. 

[E Add project to an EAR 

EAR project name: [EAR ~ | [New project.. 
Working sets 

El Add project to working sets 

Working sets: [ =][ seea- 
en Back | Nem | Enh |[ concal | 


图 7.5-2 新 建 工 程 


(3) 单 击 Next 按钮 。 指 定 Java 文件 的 编译 路 径 ( 默 认为 build\classes) ,如 图 7. 5-3 
Bram. 

(4) Aik“ Next” Ji ,分别 在 "ContextRoot”、“Contentd irectory" , * JavaSourceDirectory" Pit 
Ti Web 服务 的 根 路 径 、Web 资源 的 目录 名 称 、 源 代码 目录 ,如 图 7. 5-4 所 示 。 

(5) 单 击 Finish 按钮 后 完成 工程 创建 ,在 ProjectExplorer 中 看 到 Eclipse 创建 出 来 的 
目录 : 如 果 需 要 改变 在 工程 创建 时 的 一 些 设置 ,可 以 右 击 工程 目录 ,在 弹出 的 菜单 中 ,选择 
Properties 选项 ,在 弹出 的 设置 对 话 框 中 ,可 以 设置 Web 工程 的 根 目录 (也 就 是 路 径 , 一 般 
设置 成 WebContent) 和 Dynamic Web Module Version 的 设置 ,如 图 7. 5-5 所 示 。 

(6) 新 建 项 目的 文件 结构 如 图 7. 5-6 所 示 , Web 项 目 就 已 经 建 好 了 。 
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Java 
Configure project for building a Java application. 
Source folders on build path: 
Bsr 
Edit.. 
Remove 


图 7.5-3 指定 Java 文件 的 编译 路 径 


Web Module = 
Configure web module settings. 


Context root: TONGXIANG 


Content directory: WebContent 


图 7.5-4 设置 Web 服务 路 径 


2. 将 现 有 文件 导入 建 好 的 项 目 中 
CD 将 现 有 的 工程 导入 到 Eclipse 中 .如 图 7. 5-7 所 示 。 
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一 Web services engine. 
10 
z1 a 

加 B) JAX-RS (REST Web Services) uoc 

ewe za - 

Be JPA 20 - 

E 8) webpodet (XDoclet) 123 -~ 


Enables Web services generation through the Axis2 


图 7. 5-5 


设置 Web 工程 的 根 目录 


Create new projects from an archive file or directory. 


E 


, 
> (d JAX-WS Web Services 
> a Deployment Descriptor: TONGXIANG | 
4 28 Java Resources 
> @ sre 
> BA Libraries 
4 mÀ JavaScript Resources 
> @B WebContent 
> BA ECMAScript Built-In Library 
> @ ECMA 3 Browser Support 
build 


Select an import source: 


E, Preferences 
> © Android 
Sos 
» © EB 
> & Git 
> Q Install 
4 © Java EE 
E, App Client JAR file 
(E, EAR file 
BA Java EE Utility Jar 


PET 


4 @& WebContent | 
> & META-INF 
> © WEB-INF 


@ <Back [GNet] Frish 


图 7.5-6 项 目的 目录 


7.5-7 导入 现 有 工程 
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(2) 选择 现 有 的 工程 根 目录 。 如 图 7. 5-8 所 示 。 


Import Projects 
Select a directory to search for existing Eclipse projects. 
[Bowse| 


9) Select root directory: E:\workspace\TONGXIANG\TONGXIANG 


— 


© Select archive file: Browse... 


TONGXIANG (E:\workspace\TONGXIANG\TONGXIANG) 


FF Copy projects into workspace 

Working sets 

[E Add project to working sets 

Working sets: | -][. Select.. 


图 7.5-8 选择 根 目录 


(3) 导入 成 功 后 的 工程 文件 夹 目录 如 图 7. 5-9 所 示 。 

3. GeoServer 服务 器 发 布地 图 数据 信息 

GeoServer 发 布 数 据 库 数 据 已 经 在 前 面 详细 介绍 了 ,这 里 要 做 的 是 将 已 有 工程 的 空间 
数据 库 文件 发 布 到 地 图 服务 器 上 。 

GeoServer 安装 成 功 后 ,首先 打开 GeoServer 服务 器 , 单 击 “Start geoserver” 启 动 服务 
器 。 在 浏览 器 中 输入 http://localhost:8081/geoserver/web/( 安 装 Geoserver 时 为 了 不 与 
Tomcat 端口 “8080” 冲 突 ,设置 geoserver 端口 为 “8081”)。 进 入 管理 员 界 面 ,发 布 数据 库 地 
图 数据 的 具体 步骤 如 下 。 

CD 打开 GeoServer 管理 页 面 ,以 管理 员 身 份 登录 ,账户 为 admin/ geoserver。 

(2) 新 建 一 个 Workspace. fi 44 7J " OpenGIS". URL 设置 为 “OpenGIS. edu. zjut”, 如 
图 7. 5-10 所 示 。 
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Edit Navigate Search Project Tomcat Run Window Help - 一 一 
p-uias RAMS B|.c/ 912.10 
Quick Ad 


4 & TONGXIANG B 
b 4 JAX-WS Web Services 
D $y Deployment Descriptor: TONGXIANG 
4 ÈS Java Resources 

> gi sre 

> mà Libraries 
4 & build 

© classes 

4 & WebContent 

"名 3D 

> © cgi 

> © dass 

» © forms 

> @ images 

» &img 

> Bis 

> © lib 

> © META-INF 

> © style 

> @ template 

> © theme 

> @ tree 


图 7.5-9 导入 的 工程 目录 


15 GeoServer 


7.5- 10 建立 Workspace 


(3) 添加 一 个 Store. fi Stores Add new Store— PostGIS, WA 7. 5-11 所 示 。 
在 Vector Data Source 中 选择 PostGIS ,如 图 7. 5-12 所 示 。 

选择 PostGIS ,在 新 的 页 面 中 输入 如 下 信息 : 

选择 Workspace: 设置 为 新 建 的 “OpenGIS”。 

设置 DataSourceName: tx。 

Description 设置 为 空 。 
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=| Contact Information 


@ About Geoserver < >> Results 1 to 10 (out of 10 tems) [& sea 
Data EX O sename | 


[Bl] tayer Preview BE la s s Shapefie 

E Workspaces 一 

D m ter nye Shapefie 
yers ø la topp states_shapefie Shapefie 

b Layer Groups 

€ cached Layers B lo topp taz_shapes Shapefie 

9 sve o G mytest 2 Shapefie 

Services Ea nure arcGridSample ArcGrid 

& wes na ure img sample2 Wordimal 


图 7.5-11 添加 Store 


New data source 
Choose the type of data source you wish to configure 


Vector Data Sources 


1d Drectory of spata fies (shapefiles) - Takes a drectory of shapefiles and expl 
(à H2 - H2 Embedded Database 

G H2 ONDD - H2 Embedded Database ONDD 
G Orade NG UNDI) - Oracle Database ONOT) 


(à Properties - Allows access to Java Property files contaning Feature informatie 
(d Shapefie - ESRI(tm) Shapefies (*.shp) 
TS Web Feature Server - The WFSDataStore represents a connection to a Well 
Features publshed by the server, and the abiity to perform transactions on the| 


Raster Data Sources 


38 ArcGrd - Arc Grid Coverage Format 
Lcattinae  — — — — — — — M GeoTiFF - Tanned image Fle Format with Geooraohi information | 


图 7. 5-12 选择 数据 库 Postgis 


host* WRU “localhost”. 

port 默认 为 “5432”。 

database 中 输入 “OpengisDataBase”。 

schema 中 输入 “gdbo”。 

user” 设置 为 “postgres”( 数 据 库 用 户 名 ) 。 

password 中 输入 *123456”( 数 据 库 密码 ) 。 

单 击 “Save” 按 钮 保存 。 

(4) 图 层 发 布 。 在 上 一 步 单 击 *Save” 按 钮 后 ,会 弹出 发 布 界面 ,如 图 7. 5-13 所 示 。 

发 布 数据 库 中 字段 数据 : 单 击 左 侧 栏 *Data” 标 签 下 的 “Layers”, 单 击 “Add a new 
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© About GecServe 2 Resits 1 to 25 (out of 44 tems) & Search 
Data 
国 Layer Preview Be CHINA shoudu hovdu v EPS6:4326 
ferenn EON w acGndsamoke Arc Sample * ES6:4326 
LIS oe nure ma samole2 Pk50095 鱼 Ep56:32633 
b tye cues oe nure mosaic mosaic v Eps6-4326 
49 syes 

oe nue worldimageSarrole Jmg Samole Xa EPSG:4326 
‘Services 
wes ma ‘Opencis OpenGIS. eo base v EPS6:4326 
G ws Bn OpenGIS. penGE geo. cable v EPS6:4326 
Sms D OpenGs openGE ooeo_ol_engneemng v EP56:4326 

Eu OpenGIS. DpenGE geo. connect, Ine. * Ep56:4326 
H Global E a openGE Opencis geo. connect. wire v EpsG:4326 

E 
El [à onena DoenGI ao actnal s 


图 7.5-13 图 层 发 布 界面 


resource”, 依 次 发 布 空间 数据 库 中 各 表 的 数据 。 

选择 所 要 发 布 的 数据 , 单 击 “Publish” 按 钮 ,弹出 参数 设置 界面 ,该 界面 中 主要 设置 
WFS, WMS 服务 的 一 些 相关 参数 ,根据 实际 情况 选择 设置 即 可 。 

(5) 图 层 预览 : 数据 发 布 后 , 单 击 左 侧 栏 页 面 中 “Data” 下 的 “LayerPreview” 按 钮 ,找到 
刚 发 布 的 Layer, 单 击 *OpenLayers”, 查 看 刚 发 布 的 数据 ,如 图 7. 5-14 所 示 。 


W opentayers map preview x 


$ 


Scale = 1 : 289M 
Click on the map to get feature info 


图 7.5-14 数据 发 布 预览 
7.5.2 运行 工程 
CD 导入 Web 工程 后 ,还 需要 创建 一 个 Server, 才 能 在 Eclipse 中 运行 .调试 应 用 。 单 
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击 “File>New 一 Other...”, 在 弹出 的 对 话 框 中 选择 “Server”, 如 图 7. 5-15 所 示 。 


图 New 
perita EJ 
ma 
ER] 
© Cr a) (rh) at) 


图 7.5-15 创建 一 个 Server 


(2) 单 击 Next 按钮 后 ,在 弹出 的 对 话 框 中 选择 Web 容器 ,这 里 选择 Tomcatv7. 0 Server, 


(3) 单 击 Next 按钮 ,在 弹出 的 对 话 框 中 选择 Tomcat. 的 安装 目录 、JRE 版 本 ,如 图 7. 5-16 
所 示 。 


Publishes and runs J2EE and Java EE Web projects and server configurations to a 
local Tomcat server. 


T —— 
Server's host name: localhost. 


Server nome: Tomcat v7.0 Server at localhost (2) | 


see ine nce [pte on P 


Configure runtime environments... 


u— 


[o] [sm | net> | Eish J| cm ] 


7.5-16 选择 Web 容器 
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(4) 单 击 Next 按钮 后 ,在 “New Server” 对 话 框 中 ,左边 的 列表 框 列 出 了 Workspace 中 
的 所 有 Web 工程 ,右边 的 列表 框 表示 在 这 个 Server 上 部 署 的 Web 工程 ,这 里 将 刚才 的 
dynweb 添加 进来 ,如 图 7. 5-17 所 示 。 


f] New Server 


Add and Remove 
Modify the resources that are configured on the server 


Move resources to the right to configure them on the server 
Available: Configured: 


T [re] |) 
[113 
A ao 
& dbtest 
Bh flelood 
Ba HelloWorldServlet 
D hibernate 

ET 

> & Shopsystem [Add ait >>) 

b & spring 


panga [<< Remove al | 


& struts 


@ Er | 


图 7.5-17 部 署 的 Web 工程 


(5) 单 击 Finish 按钮 后 ,Server 就 创建 完了 ,可 以 在 Window ShowView- Server 中 
查看 Server, MP 7. 5-18 Bros 


Edit Navigate Search Project Tomcat Run Window 


Help 
-He mUsxEIR|I«IO||»mmi*-0-QSQ-d-6- 
Quick Access | e Ee eb 


E Project Explorer 只 | 和 Navigator © C M Servers $2 |E Data So. E Propert (i3 Snippets E Console Ej 
aslie ` 

b 23 ajax » (B Tomcat v7.0 Server at localhost [Stopped] 

b $9 androidhelloworld 4 È Tomcat v7.0 Server at localhost (2) [Stopped, Republish] 

> &9 appcompat v7 & TONGXIANG 

» $2 BBs 

b Bg chapa 

b $2. dbtest 

> B fileload 

> 2 HelloWorldServiet 

b B hibernate 

b 1$ PyDevTest 

> & als 

D 1 Servers 


7. 5-18 查看 Server 
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(6) 创建 完 Server 后 ,可 以 单 击 Servers 面板 中 的 Start the server, Start the server in 
debug mode 运行 ,调试 应 用 如 图 7. 5-19 所 示 。 


PL 3 ———— ER D mm 
(ae E-News Font fa Wop 


n- OTR ~ mee O-a- -57 
| st eee (ETER) © mone C Debe Development C Database Debug de EP messeri 


USTED ova be -o 


ERENT: EL ee: 


图 7. 5-19 调试 应 用 Server 
CD 右 击 工程 名 ,选择 Run As-Run On Server. Ml 7. 5-20 所 示 


Newgate Sosh Project Tom Hun Wedoe Hep 


n- Pry her *s8:;9-0-Q-3-9-$64-94v-i- 675r 
4 Acces IE [FETE] Debug @ PyOev (D) Database Development Üb Database Debug & 1 


图 7. 5-20 ”调试 工程 


(8) 运行 工程 ,启动 登录 界面 ,输入 用 户 名 和 密码 ,系统 默认 用 户 名 和 密码 都 为 admin， 


如 图 7. 5-21 所 示 。 


340 | WebGIS 


[T 
rre 
Bá Towanwwa 
IAW Web Services 
"i Deployment Desciptor TONGXANG 
12 BB Jove Resources 
gre 
mo 
m 


ET | II] onus oes D Database Development D Detsbase Debug dins E evaccnt 


6-554-92:5-;-* 


->E 


PSEEAY CETL EELED 


m 
pre" 
Belews 
E here 
pre 
Boos 
He" 

D erictemo 
pre 
Mores 
pre 
Bises 

prem 
gre 

ARX WS Wib ris 


"ha Depkoymert Descriptor TONGXANG. 
a BP Java Resources 

Bon 

mo 
m 


图 7. 5-21 
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图 7. 5-22 
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交通 WebGIS 信息 系统 


8.1 交通 WebGIS 系统 概述 


8.1.1 开发 背景 


地 理 信 息 系 统 (GIS) 广 泛 应 用 于 国民 经 济 的 各 个 领域 。 特 别 是 在 交通 管理 领域 ,GIS 
有 着 更 加 重要 的 地 位 。 现 代 的 城市 道路 是 城市 总 体 规划 的 主要 组 成 部 分 ,关系 着 整个 城市 
的 有 机 活动 。 对 城市 路 网 的 管理 ,包括 道路 监测 点 的 维修 和 设备 更 换 , 路 况 的 拥塞 度 查询 ， 
路 线 的 最 短路 径 搜索 ,以 及 城市 全 貌 的 浏览 和 空间 检索 ,都 能 在 GIS 里 得 到 直观 的 体现 。 
因此 ,开发 和 应 用 交通 WebGIS 信息 系统 ,具有 很 高 的 实用 价值 和 商业 前 景 。 

本 章 介 绍 基于 Web 平 台 的 交通 WebGIS 信息 系统 的 构建 。 手 机 客户 端 采用 ArcGIS 
在 线 电 子 地 图 的 APP, 前 台地 图 显示 编辑 采用 ArcGIS 开发 框架 ,系统 整体 框架 采用 SSH 
(Struts2 十 Spring2 十 Hibernate3) ,地 图 前 台 框 架 采 用 ArcGIS JavaScript Web, 地 图 服务 
器 为 ArcGIS Server10. 2. Web 服务 器 为 Tomcat. 0, 地 图 编辑 和 数据 分 析 采 用 ArcGIS 
Desktop10. 2 ,数据 库 为 PostgreSQL + PostGIS, 


8.1.2 需求 分 析 


交通 WebGIS 信息 系统 是 道路 交通 信息 和 城市 空间 信息 的 快速 发 布 . 查 询 检 索 以 及 相 
关 统 计 分 析 的 网 络 信息 系统 ,主要 用 户 是 道路 交通 管理 部 门 ,将 来 还 会 开放 部 分 功能 给 广大 
市 民 。 因 此 系统 界面 必须 简单 友好 ,同时 提供 完善 的 功能 。 结 合 城市 道路 交通 信息 管理 的 
实际 需求 ,遵循 科学 性 、 实 用 性 、 可 扩展 性 和 开放 性 等 原则 开发 ,系统 应 实现 以 下 功能 : 

CD 地 图 管理 功能 。 实 现 对 地 图 图 层 的 分 层 显示 和 管理 ,实现 基本 的 放大 、 缩 小、 平移 、 
漫游 .地 图 查询 .图 层 控制 ,应 眼 等 操作 ; 通过 不 同 颜色 实时 显示 道路 交通 流 信息 ,从 而 分 析 
目前 的 道路 交通 状况 ; 地 图 上 业务 信息 应 该 和 地 图 位 置 保持 同步 。 

(2) 手机 端 APP 功能 。 地 图 浏览 地 点 搜索 、 路 径 查 询 、 定 位 和 导航 等 。 因 此 从 界面 设 
计 上 ,采用 一 个 主 界面 和 三 个 二 级 界面 来 实现 这 些 基 本 地 图 功能 。 主 界面 展示 基本 地 图 ,并 
且 可 以 通过 选项 菜单 切换 不 同类 型 的 地 图 ,三 个 二 级 界面 分 别 实现 地 点 搜索 功能 、 路 径 查 询 
功能 以 及 导航 功能 。 
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(3) 区 域 交通 状态 服务 水 平 的 多 粒度 评价 及 展示 。 提 供 对 经 典 区 域 划分 的 服务 水 平 及 
指标 展示 和 任意 区 域 划分 的 服务 水 平 及 指标 展示 , 即 依据 经 典 的 城区 划分 或 经 典 的 交通 区 
域 划分 显示 各 区 域 的 服务 水 平 ,同时 用 户 还 可 以 根据 自己 的 需求 进行 的 任意 区 域 划分 ,系统 
会 自动 计算 该 区 域 划分 中 各 区 域 的 各 项 指标 参数 和 服务 水 平 ,并 展示 出 来 。 

(4) 城区 主要 道路 和 区 域 交 通 的 短 时 预测 预报 。 提 供 5 分 钟 、10 分 钟 、15 分 钟 后 的 道 
路 及 区 域 交通 状态 的 展示 以 及 统计 分 析 以 及 与 当前 状态 的 对 照 功 能 。 

(5) 路 径 规 划 。 根 据 在 地 图 上 添加 的 任意 停靠 点 显示 一 条 最 优 路 径 , 同 时 可 以 在 这 条 
路 径 上 添加 临时 事件 障碍 点 ,重新 生成 并 显示 新 的 路 径 。 

(6) 导航 功能 。 根 据 输入 的 不 同 目的 地 (或 输入 的 两 个 不 同 地 点 ) 在 地 图 中 显示 一 条 
最 优 路 径 , 同 时 可 以 在 列表 框 添加 多 个 中 间 点 ,生成 一 条 同时 经 过 不 同 中 间 点 的 最 优 
路 径 。 

CD 用 户 管理 及 权限 控制 。 用 户 管理 主要 是 用 户 信 息 添 加 删除 .修改 等 。 用 户 权限 控 
制 主要 是 针对 不 同 用 户 的 请 求 作 不 同 的 权限 设置 ,对 于 系统 管理 员 级 别 的 用 户 可 以 使 用 系 
统 的 配置 以 及 编辑 功能 ,对 服务 器 的 系统 参数 .数据 进行 更 新 和 修改 ,而 一 般 的 用 户 可 能 只 
具备 浏览 ,查询 ,统计 制图 等 功能 。 

(8) 其 他 功能 ,如 系统 管理 .公告 管理 .日志 管理 等 。 

除了 上 述 主要 功能 以 外 ,交通 WebGIS 信息 系统 还 应 该 满足 以 下 非 功能 性 需求 : 

CD 系统 性 能 : 保证 系统 数据 来 源 可 靠 .实时 ,对 信息 查询 的 响应 时 间 不 应 超过 5 秒 。 

(2) 系统 开放 性 : 系统 要 求 能 够 与 不 同 的 地 理 信息 系统 ,不 同 格式 的 地 理 信息 数据 相 
AER. 系统 提供 的 功能 应 该 能 够 支持 不 同 语言 的 操作 系统 。 

(3) 系统 可 移植 性 : 整个 系统 应 具有 很 高 的 可 靠 性 、 稳 定性 ,满足 连续 稳定 运行 的 
要 求 。 

(4) 数据 管理 性 能 : 系统 应 满足 数据 保存 至 当前 两 年 内 的 数据 的 容量 管理 需求 ; 支持 
三 年 内 的 数据 增长 的 管理 需求 。 

(5) 数据 采集 频率 : 为 保证 区 域 交通 信息 系统 能 够 对 服务 水 平 状 态 进行 准确 的 监控 ， 
同时 考虑 到 高 峰 时 段 的 特殊 情况 .对 于 检测 器 数据 采集 频率 应 为 每 两 分 钟 发 送 一 次 。 


8.2 系统 整体 设计 


系统 的 整体 架构 设计 是 项 目 开发 的 关键 ,整体 设计 的 好 坏 将 关系 到 系统 开发 过 程 是 否 
顺利 以 及 日 后 维护 是 否 方便 等 。 系 统 基于 Web 平台 构建 .手机 客户 端 采用 ArcGIS 在 线 电 子 
地 图 的 APP, 前 台地 图 显示 编辑 采用 ArcGIS 开发 框架 ,系统 整体 框架 采用 SSH(Struts2 + 
Spring2 十 Hibernate3) ,地 图 前 台 框 架 采 用 ArcGIS JavaScript Web, 地 图 服务 器 为 ArcGIS 
Server10. 2, Web 服务 器 为 Tomcat7.0, 地 图 编辑 和 数据 分 析 采 用 ArcGIS Desktop10. 2 , 数 
据 库 为 PostgreSQL 十 PostGIS。 

首先 是 交通 WebGIS 信息 系统 逻辑 分 层 设 计 ,完全 遵循 MVC 的 模块 化 设计 ,人 逻辑 分 层 
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如 图 8. 2-1 所 示 。 


交通 WebGIS 信 息 系统 


| Hd A t 


1 

| | 

视窗 层 控制 层 i 业务 层 持久 层 | 
(JSP 和 Struts 2) (Spring 和 Struts 2) i (JavaBeanffIDAO) (Hibernate) | 
1 

1 


8.2-1 电力 管线 GIS 管理 系统 逻辑 分 层 示意 图 


其 中 ,视图 层 也 称 为 “表示 层 ”, 是 系统 与 用 户 交互 的 窗口 。 用 户 看 到 的 所 有 页 面 都 可 以 
称 为 视窗 层 , 该 层 通 过 Struts2 和 JSP 实现 。 

控制 层 从 视窗 层 接受 用 户 请 求 ,然后 从 模型 层 取 出 处 理 结果 并 返回 给 视窗 层 , 其 中 并 不 
涉及 任何 具体 的 业务 逻辑 处 理 。 

模型 层 负责 处 理 业务 逻辑 和 数据 库 的 底层 操作 ,为 了 继续 降低 程序 的 耦合 关系 ,在 项 目 
设计 中 将 此 层 划分 为 业务 层 和 持久 层 ,前 者 负责 业务 逻辑 的 处 理 ; 后 者 负责 数据 库 的 底层 
操作 ,将 持久 化 操作 完全 从 业务 分 离 出 来 ,提高 了 程序 的 模块 化 设计 。 

32 58 4 t Ad YA OS n d 8. 2-2 所 示 。 


上 
| 模型 层 
请 求 控制 层 1 业务 层 
(Spring 和 Struts 2) i (avaBean 和 DAO) 
/ wum / 
1 
视窗 层 i 持久 层 
响应 (JSP 和 Struts 2) 1 (Hibernate) 
' 


图 8. 2-2 ”逻辑 分 层 之 间 的 内 部 关系 


为 了 使 项 目 容易 管理 和 维护 ,在 开发 之 前 需要 确定 项 目的 系统 文件 夹 结构 , 即 系统 文件 
夹 结构 设计 。 通 常 的 做 法 是 将 项 目 中 功能 类 似 或 者 同一 个 模块 的 文件 放 在 同一 个 包 文件 
中 , 包 以 模块 名 命名 ; 在 应 用 中 为 了 提高 系统 的 安全 性 ,避免 用 户 通 过 输入 地 址 访问 JSP 页 
面 资源 ,在 开发 时 将 JSP 页 面 放 入 WEB-INF 文件 夹 中 ,这 样 用 户 就 只 能 通过 Action 访问 
指定 的 JSP 页 面 。 以 交通 WebGIS 信息 系统 Java 类 的 文件 夹 结构 和 视图 层 JSP 文件 的 文 
件 夹 结构 为 例 ,工程 文件 夹 结构 如 图 8. 2-3 所 示 。 

为 达到 页 面 布局 统一 和 整体 风格 一 致 的 效果 ,需要 对 页 面 格式 进行 统一 设计 ,以 交通 
WebGIS 信息 系统 的 前 台 首 页 的 布局 为 例 ,设计 如 图 8. 2-4 所 示 。 
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4 $3 arcgisweb 
> @ JAX-WS Web Services 
> "fg Deployment Descriptor: arcgisweb 
4 98 Java Resources 
4 $B src 


> [8i orgxhd.action 基本 的 Action 类 
回 structsxml Struts 配 置 类 
> mà Libraries 
> BÀ JavaScript Resources 
> © build 
4 $ WebContent 
> Bis 
> © META-INF 样式 文件 
P, ceo 界面 模板 
Dera 配置 文件 和 Java 库 
> &lib o 项 目 引用 的 jar 包 
i applicationContextxml Spring 文件 
@ webxml Web 配 置 文件 
[Ej README.md 
图 8. 2-3 工程 文件 夹 结构 图 
系统 登录 
工具 栏 操作 
单 点 路 径 生成 
图 p 
例 地 图 展示 路 径 导航 栏 
栏 
地 图 基本 信息 


8.2-4 前 台 首页 布局 设计 


WebGIS 的 交通 信息 系统 整体 架构 设计 如 图 8. 2-5 所 示 。 
系统 功能 模块 划分 如 图 8. 2-6 所 示 , 整 个 系统 划分 为 地 图 模块 .经 纬度 模块 .导航 模块 
以 及 手机 定位 模块 。 各 个 模块 的 设计 将 在 后 面 详细 介绍 。 


8.2.1 主 界面 基本 模块 功能 设计 


主 界面 如 图 8. 2-7 所 示 ,其 基本 功能 如 下 : 
(1) 图 列 栏 : 对 照 地 图 中 显示 的 设备 图 标 及 属性 表 。 
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客户 端 : Firefox;Internet Explorer SP2;Chrome;Netscape 


ET fi 定位 模块 f 导航 模块 E f 用 户 管理 ( 


网 络 发 布 
网 络 服务 器 (Tomcat) 
ZN 
XML 格式 数据 流 
We 地 图 服务 器 
模式 (ArcGIS Server10.2) 
JDBC 空间 数据 搜索 引擎 m 


网 络 分 析 基础 空间 数据 


数据 库 服务 : PostgreSQL+PostGIS 空 间 数据 库 + 属 性 数据 库 


操作 系统 : Windows 8,Windows 7 


图 8.2-5 系统 整体 架构 图 


系统 功能 模块 分 类 


| 


i i i 1 
地 图 基本 模块 经 纬度 路 径 规 划 。 | | 导航 模块 手机 定位 模块 

E43 LE bo BO E boa Eod 
" 有 EIJE] | 路 | Ja] [m] | 县 | | 地 路 
mis s wx su [s 9| al | 晶 | | 每 | | 体 | (m | 地 | | 第 
is wis s sg ISI ISI II day el | 基 | | 点 | | 要 
Xm E E SE 3| | a] E aR) [| | 路 | | 本 | [X | a 
移 || 容 | | 路 | | 路 | | 路 | | 管 择 清 清 请 加 it 显 浏 位 导 

理 W fit) |E B| | 示 | |i i 


8.2-6 系统 功能 结构 图 
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(2) 搜索 栏 : 根据 输入 的 地 址 ,可 实现 名 称 的 查找 、 地 图 的 自动 定位 功能 ,也 可 根据 输 
入 的 坐标 实现 地 图 的 自动 定位 功能 。 


Ske anlo $ 1 


图 8.2-7 主 界面 基本 功能 图 


8.2.2 地 图 基本 管理 模块 功能 设计 


地 图 基本 功能 设计 如 图 8. 2-8 所 示 ,包括 以 下 功能 : 

CD 平移 : 单 击 按钮 将 鼠标 置 于 平移 状态 ,可 用 来 清除 当前 图 形 操作 工具 的 状态 。 
(2) 放大 : 单 击 按钮 对 地 图 进行 放大 操作 (或 者 通过 鼠标 中 键 进行 )。 

(3) 缩小 : 单 击 按钮 对 地 图 进行 缩小 操作 (或 者 通过 鼠标 中 键 进行 )。 

(4) 全 图 : 单 击 按钮 显示 全 图 。 

(5) 保存 : 单 击 按钮 将 发 生 改变 的 地 图 数据 更 新 到 数据 库 。 

(6) 删除 : 单 击 按钮 删除 地 图 要 素 。 

CD) 添加 : 添加 绘制 新 的 道路 。 

(8) 属性 : 单 击 查 看 道路 段 属性 信息 。 

(9) 90]; 选择 剪 切 道路 。 


用 户 
i of d 51 do E do d 
新 | x 
建 | | 除 | | 属 | | 给 
we) | 选 | | 性 | | 制 | | 型 | | 前 | e a 
择 | IBS SD |e 切 | | 形 | | 
内 | | 内 | | 看 | | 路 
容 | “| 容 


8. 2-8 地 图 基本 功能 设计 
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(10) 联合 : 联合 不 同 的 道路 。 
QD 撤销 : 撤销 之 前 的 操作 。 
(12) 恢复 : 恢复 之 前 的 操作 。 


8.2.3 手机 定位 模块 功能 设计 


手机 定位 APP 的 功能 设计 如 图 8. 2-9 所 示 。 手 机 定位 模块 需要 实现 地 图 浏览 .地 点 搜 
R .路 径 查 询 .定位 和 导航 等 功能 。 因 此 手机 定位 模块 设计 了 一 个 主 界面 和 三 个 二 级 界面 。 
主 界面 展示 基本 地 图 ,并 且 可 以 通过 选项 菜单 切换 不 同类 型 的 地 图 ,三 个 二 级 界面 分 别 实现 
地 点 搜索 功能 、 路 径 查询 功能 以 及 导航 功能 。 主 界面 设计 一 个 定位 功能 调用 按钮 和 三 个 二 
级 界面 调用 按钮 ,用 于 全 屏 展示 电子 地 图 ,并 且 可 以 通过 选项 菜单 来 切换 不 同类 型 的 地 图 ; 
地 点 搜索 界面 设计 一 个 文本 输入 框 ,用 于 接收 用 户 输入 的 地 址 ,地 图 为 拓扑 地 图 ,用 于 展示 
搜索 结果 ; 路 径 导 航 查 询 界面 展示 基本 的 地 图 ,对 话 框 用 于 接受 用 户 输入 的 起 始 地 址 ,最 终 
将 返回 的 路 径 结果 用 列表 抽 导 展示 出 来 ; 导航 功能 界面 基于 路 径 抽 导 展示 的 结果 ,可 分 段 
展示 不 同 的 路 径 片段 ,同时 可 以 开局 语音 提示 功能 。 


8.2.4 经 纬度 路 径 生 成 功能 设计 


经 纬度 路 径 生 成 模块 设计 如 图 8. 2-10 所 示 。 该 模块 用 于 在 地 图 上 单 击 添加 多 个 不 同 
地 点 的 经 纬度 坐标 ,产生 一 系列 相连 的 路 径 ; 在 上 述 路 径 中 添加 障碍 点 ,可 以 生成 新 的 路 
径 , 其 中 障碍 点 可 以 表示 现实 当中 道路 损坏 ,发 生 交 通 事故 等 情况 。 从 功能 设计 的 角度 来 
说 ,要 设计 实现 以 下 功能 : 

(1) 添加 停靠 点 ; 

(2) 添加 障碍 点 ; 

(3) 清除 停靠 点 ; 

(4) 清除 障碍 点 ; 

(5) 产生 路 径 。 


RE HP 
| 
Le E L i i ai d 4 d 3 
H T [i z E 加 i| | 加 | | 除 E: a 
Hl [s EI | wl |&| m lal | B 
览 索 询 位 H E a " 径 线 
图 8. 2-9 手机 定位 模块 基本 功能 设计 图 8.2-10 ”路径 生 成 模块 


8.2.5 导航 模块 功能 设计 
导航 模块 的 设计 如 图 8. 2-11 所 示 。 导 航 框 使 用 网 络 分 析 来 计算 不 同 地 点 之 间 的 导航 路 
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径 , 通 过 ArcGIS 发 布 网 络 分 析 服 务 至 ArcGIS 


导航 模块 
Server, 为 用 户 提供 实时 导航 功能 ,需要 设计 实 = 
现 以 下 功能 : 1 1 1 1 i i 
CD 在 输入 框 中 添加 目的 地 ; 目 al wl |&g a 多 
的 | ox |2 
(2) 添加 多 个 目的 地 ; » z| X 12 E ü 
(3) 选择 不 同方 法 驾驶 汽车 卡车 或 者 步行 ， | 加 | | 式 | | 式 | (P) | 加 | [n 


(4) 选择 时 间 最 快 还 是 路 径 最 短 ; 
(5) 产生 导航 路 径 。 图 8. 2-11 导航 模块 


8.2.6 用 户 管理 模块 功能 设计 


为 方便 不 同 用户 对 系统 的 使 用 需求 ,用 户 管理 模块 需要 设计 实现 以 下 功能 ， 

CD 用 户 管理 : 超级 管理 员 可 随意 添加 、 
修改 和 删除 各 种 权限 用 户 ,普通 用 户 可 修改 密 
码 与 自身 详细 信息 。 

(2) 权限 管理 : 依据 菜单 功能 项 、 页 面 元 


admin 超级 管理 员 素 项 动态 灵 ; 
km 项 动态 灵活 授权 各 类 用 户 权限 。 
summer ARP CD 日 志 管理 : 监控 记录 程序 运行 的 所 有 


情况 ,包括 执行 .错误 等 信息 。 


* a 
ele See a 常规 的 后 台 管理 界面 如 图 8, 2-12 所 示 。 


8.3 数据 库 设 计 


基于 GIS 的 交通 信息 系统 采用 PostgreSQL 为 属性 数据 库 PostGIS 为 空间 数据 库 , 通 
过 Hibernate 实现 系统 的 持久 化 操作 。 本 节 介 绍 交通 WebGIS 信息 系统 的 核心 实体 类 设计 
以 及 相应 的 设计 E-R 图 和 数据 表 设 计 。 


8.3.1 E-R 图 设计 


下 面 介 绍 核心 实体 对 象 设计 E-R AL. 
A) user( 用 户 信息 表 ) 的 E-R 图 如 图 8. 3-1 所 示 。 


CH C 邮箱 ) 状态 ) 
| 
C sm ) 用 户 (C 地址 ) 


(等 级 C 电话 ) 真实 姓名 ) 


图 8.3-1 user 的 E-R 
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(2) 市 区 道路 _polyline 的 E-R 图 如 图 8. 3-2 所 示 。 
(3) 市 区 杂 路 _polyline 的 E-R 图 如 图 8. 3-3 所 示 。 


BE BE 
Cojean) 市 区 道路 C 状态 ) (Object | 市 区 杂 路 C 状态 ) 
Shape Shape 


8.3-2 市 区 道路 _polyline 的 E-R 图 图 8.3-3 市 区 杂 路 _polyline 的 E-R 图 


8.3.2 创建 数据 库 及 数据 表 


导入 空间 数据 库 文件 ,设备 空间 数据 表 如 图 8. 3-4 所 示 。 
图 8. 3-5 是 用 市 区 道路 的 数据 来 展示 数据 表 的 详细 结构 图 ,用 于 保存 市 区 道路 的 相关 
信息 。 


EML ML L oe x 
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1915. 059823 
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631. 108885 
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181.889474 
174. 562853 
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图 8.3-4 设备 空间 数据 表 图 8.3-5 市 区 道路 数据 
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8.4 系统 实现 


前 面 介绍 了 交通 WebGIS 信息 系统 的 基本 概念 、 需 求 分 析 以 及 系统 设计 ,在 掌握 了 系 
统 设计 的 相关 知识 后 ,就 可 以 动手 进行 系统 的 实现 了 。 下 面 介绍 如 何 使 用 GIS 的 相关 技术 
来 实现 交通 WebGIS 信息 系统 。 


8.4.1 开发 环境 及 环境 配置 


首先 来 了 解 一 下 开发 WebGIS 系统 所 需要 的 开发 环境 。 交通 WebGIS 信息 系统 所 需 
要 的 开发 环境 如 下 : 
1. 服务 器 端 
CD 操作 系统 : Windows 操作 系统 。 
(2) Web 服务 器 : Tomcat6. 0 或 者 更 高 版 本 。 
(3) Java 开发 包 : JDK1.5 以 上 。 
(4) 数据 库 : PostgreSQL(PostGIS)。 
(5) 地 图 服务 器 : ArcGIS Server10. 2 或 者 更 高 版 本 。 
(6) 地 图 绘制 网 络 规划 : ArcGIS Desktop10. 2 或 者 更 高 版 本 。 
(7) 地 图 开发 框架 : ArcGIS for JavaScript API 或 者 更 高 版 本 。 
(8) 显示 器 分 辩 率 : 最 低位 800 像素 X600 像素 。 
(9) 手机 端 操作 系统 : Android. 
2. 客户 端 
CD 浏览 器 : Chrome, 
(2) 分 辨 率 : 最 低位 800 像素 X600 像素 。 
准备 好 开发 所 需 环 境 ,在 真正 开始 实现 系统 之 前 ,还 需要 做 一 些 配置 工作 ,例如 搭建 项 
目 环境 及 项 目 集成 框架 等 ,在 此 之 前 需要 将 Spring2 ,Struts2, Hibernate 及 系统 应 用 的 其 他 
jar 包 导 入 项 目的 lib 文件 下 。 
1) 配置 Struts2 
在 项 目的 ClassPath 下 创建 Struts. xml 文件 ,其 配置 代码 如 下 : 
<?xml version = "1.0" encoding = "UTF - 8" ?> 
<! DOCTYPE struts PUBLIC 
" — //Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
"http: //struts. apache. org/dtd s/struts - 2.3. dtd "> 
«struts» 
< constant name = "struts. enable. DynamicMeth odInvocation" value = "false" /> 
< constant name = "struts.devMode" value = "true" /> 
< package name = "default" namespace = "/" extends = "struts - default"> 
« action name = "test" class = "action. test"> 
< result name = "success"»/tenplets/index. jsp «/result > 
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</action> 


</package > 


</struts> 


2) 配置 Hibernate 

在 Hibernate 的 配置 文件 中 配置 数据 库 的 连接 信息 、 数 据 库 方言 及 打印 SQL 语句 等 属 
性 。 由 于 ArcGIS Desktop 的 Catalog 能 够 自动 导入 数据 文件 并 连接 相应 的 数据 库 , 可 以 自 
动 在 数据 中 生成 一 些 表 和 字段 ,所 以 这 里 可 以 省 略 Hibernate 的 部 署 , 交 给 ArcGIS 来 完成 
这 一 任务 。 

3) 配置 Spring 

利用 Spring 加 载 Hibernate 的 配置 文件 及 Session 管理 类 ,在 配置 Spring 时 只 需要 配 
置 Spring 的 核心 配置 文件 applicationContex. xml, 其 代码 如 下 : 


<?xml version = "1.0" encoding = "UTF 一 8"?> 
< beans xmlns = "http://www. springframework. org/schema/beans" 
xnlns:xsi = "http://www. w3. org/2001/XMLSchema — instance" 
xmlns:aop = "http://www. springframework. org/schema/aop" 
xmlns:tx = "http://www. springframework. org/schema/tx" 
xsi:schemaLocation =" 
http://www. springframework. org/schema/beans 
http://www. springframework. org/schema/beans/ spring — beans - 2. 5. xsd 
http://www. springframework. org/schema/aop 
http://www. springframework. org/schema/aop/ spring - aop- 2. 5. xsd 
http://www. springframework. org/schema/tx 
http://www. springframework. org/schema/tx/spring - tx- 2.5. xsd"» 
< bean name = "test" class = "org. xhd. action. test"> 
</bean> 
</beans > 


4) 配置 Web. xml 
Web. xml 的 配置 文件 是 项 目的 基本 配置 文件 .通过 该 文件 设置 实例 化 Spring 容器 .过 
滤器 .Struts2 以 及 默认 执行 的 操作 ,其 关键 代码 如 下 : 


<?xml version = "1.0" encoding = "UTF - 8"?> 
< web- app id = "WebApp 9" version = "2.4" xmlns = "http://java. sun. com/xml/ns/j2ee" xmlns:xsi 
= "http://www. w3. org/2001/XMLSchema — instance" xsi: schemaLocation = "http: //java. sun. con/ 

xnl/ns/j2ee http: //java. sun. com/xml/ns/j2ee/web - app 2 4. xsd"» 
< display - name> Struts Blank «/display - name> 
«filter» 

< filter - name> struts2 «/filter - name> 

«filter - class? 

org. apache. struts2. dispatcher. ng. filter. StrutsPrepareAndExecuteFilter 

«/filter- class» 
</filter> 
< filter — mapping» 
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< filter — name> struts2 «/filter - name> 
< url- pattern»/ * «/url- pattern» 
</filter — mapping» 
<! —— spring 监听 --> 
<context - param» 
< param - name > contextConfigLocation «/param — name > 
< param - value >/WEB — INF/applicationContext. xml «/param - value > 
</context - param > 
«listener» 
< listener - class > 
org. springframework. web. context. ContextLoaderListener 
«/listener- class > 
</listener > 
«/web - app» 


8.4.2 主 界面 基本 模块 


(1) 平移 : 单 击 按钮 将 鼠标 置 于 平移 状态 ,可 用 来 清除 当前 图 形 操作 工具 的 状态 。 
(2) 放大 : 单 击 按钮 对 地 图 进行 放大 操作 (或 者 通过 鼠标 中 键 进行 ) 。 
(3) 缩小 : 单 击 按钮 对 地 图 进行 缩小 操作 (或 者 通过 鼠标 中 键 进行 ) 。 
CA) 全 图 : 单 击 按钮 显示 全 图 。 
(5) 保存 : 单 击 按钮 将 发 生 改变 的 地 图 数据 更 新 到 数据 库 。 
(6) 删除 : 单 击 按钮 删除 地 图 要 素 。 
(7) 添加 : 添加 绘制 新 的 道路 。 
(8) 属性 : 单 击 查看 道路 段 属性 信息 。 
(9) HH: 选择 剪 切 道路 。 
(10) 联合 : 联合 不 同 的 道路 。 
QD 撤销 : 撤销 之 前 的 操作 。 
(12) 恢复 : 恢复 之 前 的 操作 。 
导入 ArcGIS 相关 库 文件 以 及 功能 的 关键 实现 代码 如 下 : 
require([ 
"esri/urlUtils", 
"esri/nap", 
esri/tasks/GeometryService", 
esri/toolbars/edit", 
esri/layers/ArcGISTiledMapServiceLayer", 
esri/layers/FeatureLayer", 
esri/graphic", 
esri/tasks/RouteTask" , 


esri/tasks/RouteParameters" , 
esri/tasks/FeatureSet", 


" 
" 
" 
" 
" 
" 
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"dojo/on", 
"dijit/registry", 
"esri/geonetry/Extent", 
"esri/layers/ArcGISDynamicMapServiceLayer", 
"esri/symbols/PictureMarkerSymbol", 
"dojo/_base/array", 
"dojo/don" , 
"esri/Color", 
"esri/symbols/SimpleMarkerSymbol", 
"esri/symbols/SimpleLineSymbol", 
"esri/dijit/editing/Editor", 
"esri/dijit/HomeButton", 
"esri/dijit/Measurement", 
"esri/dijit/Directions", 
"esri/dijit/editing/TemplatePicker", 
"esri/config", 
"dojo/il8n!esri/nls/jsapi", 
"dojo/ base/array", "dojo/parser", "dojo/keys", 
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
"dijit/TitlePane", 
"dijit/form/CheckBox", 
"dijit/form/HorizontalSlider", 
"dijit/form/HorizontalRuleLabels", 
"dojo/donReady! " 
], function ( 
urlUtils, 
Map, GeometryService, Edit, 
ArcGISTiledMapServiceLayer, FeatureLayer, 
Graphic, RouteTask, RouteParameters, FeatureSet, on, 
registry, Extent, ArcGISDynamicMapServiceLayer, 
PictureMarkerSymbol, array, dom, 
Color, SimpleMarkerSymbol, SimpleLineSymbol, 
Editor, HomeButton, Measurement, Directions, TemplatePicker, 
esriConfig, jsapiBundle, 
arrayUtils, parser, keys 


parser.parse(); 
// 代 理 设置 


//use a proxy to access the routing service, which requires credits 
/ * urlUtils. addProxyRule( { 
urlPrefix : "route. arcgis. com", 
proxyUrl : "/sproxy/" 
Di 
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8.4.3 地 图 基本 管理 模块 


基本 GIS 图 形 操作 功能 包括 多 图 层 显 示 、 放 大 、 缩 小 .全 图 显示 、 鹰 眼 导航 和 图 层 控制 
功能 ,图 形 操作 的 用 例 图 (工具 栏 ) 如 图 8. 4-1 所 示 。 


1. 初始 化 


E 


SIB v x|*- Gthl c v 


地 图 初始 化 关键 代码 如 下 : 
图 8.4-1 图 形 操作 用 例 图 


map = new Map("map", ( 
center: [120.179787 , 30.263478], 
zoom: 16, 
slider: "small", 
logo: false, 
navigationMode: 'classic',Extent 
({xmin: — 20098296, ymin: — 2804413, xmax:5920428, ynax:15813776, 
spatialReference: (wkid:54032]]) 
} 
) 
Var basemap = new esri. layers. ArcGISTiledMapServiceLayer 
("http: //cachel. arcgisonline. cn/ArcGIS/rest/services/ 
ChinaOnlineCommunity/MapServer"); 
map. addLayer(basemap) ; 
map. on("layers - add- result", initEditor); 


2. 地 图 浏览 
地 图 浏览 包括 地 图 放大 、 缩 小 ,图 层 控制 , 座 眼 导航 、 全 图 显示 、 经 纬度 显示 ,关键 代码 如 下 : 


// 地 图 初始 化 

function initEditor(evt) { 

map. disableDouble ClickZoon(); 

// 模 版 选择 器 

var templateLayers = arrayUtils.map(evt.layers, function (result)( 
return result. layer; 

Di 

var templatePicker = new TenplatePicker(( 
featureLayers: templateLayers, 
grouping: true, 
rows: "auto", 
columns: 2 

), "templateDiv") ; 

templatePicker. startup(); 

var layers = arrayUtils.map(evt.layers, function (result) ( 
return ( featureLayer: result. layer }; 

DE 

var settings - ( 
map: map, 
templatePicker: templatePicker, 
layerInfos: layers, 
toolbarVisible: true, 
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enableUndoRedo: true, 
createOptions: { 
polylineDrawTools:[ Editor.CREATE TOOL FREEHAND POLYLINE ], 
polygonDrawTools: [ 
Editor.CREATE TOOL FREEHAND POLYGON, 
Editor.CREATE TOOL CIRCLE, 
Editor.CREATE TOOL TRIANGLE, 
Editor.CREATE TOOL RECTANGLE 


}, 

toolbarOptions: { 
cutVisible: true, 
mergeVisible: true, 
reshapeVisible: true 

}, 

layerInfo: { 
showGlobalID: true, 
showObjectID: true, 


}; 
var params = (settings: settings]; 
var myEditor = new Editor(params, 'editorDiv'); 
//define snapping options 
var symbol = new SimpleMarkerSymbol( 
SimpleMarkerSymbol.STYLE CROSS, 15, 
new SimpleLineSymbol( 
SimpleLineSymbol.STYLE SOLID, 
new Color([255, 0, 0, 0.5]), 5 
)» 
null 
E 
map. enableSnapping( { 
snapPointSymbol: symbol, 
tolerance: 20, 
snapKey: keys. ALT 
DE 
myEditor.startup(); 


3. 地 图 属性 
属性 查看 功能 用 于 查看 具体 的 道路 属性 信息 ,道路 属性 窗口 界面 如 图 8. 4-2 所 示 。 


图 8.4-2 查看 道路 属性 
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8.4.4 手机 定位 模块 
手机 定位 APP 的 用 例 图 如 图 8. 6-3 所 示 , 主 要 功能 包括 地 图 浏览 .地 点 搜索 e 


询 . 手 机 定位 .路径 导航 。 

CPI =; 打开 工程 文件 ,依次 展开 文件 来 目录 res/ 
4 [E] FrameLayoutt. layout. fE layout 文件 夹 上 右 击 ,新 建 一 个 xml X 
E - onera 件 , 命 名 为 main, xml。 界 面 的 大 纲 视图 如 图 8. 4-3 

d pet 所 示 。 
s percer 通过 图 形 布局 视图 可 以 看 到 界面 的 效果 如 
ee 图 8. 4-4 所 示 , 左 上 角 设 置 了 一 个 定位 按钮 ,旁边 设 
ai reco RR 置 了 一 个 标签 控件 用 于 显示 位 置 的 经 纬度 信息 , 界 
(Moca Tete) "fom" 面 底部 是 导航 条 ,由 3 个 按钮 控件 组 成 ,导航 条 上 方 
是 地 图 的 放大 和 缩小 按钮 ,布局 中 的 空白 区 域 用 于 


图 8.4-3 ” 主 界面 大 纲 视 图 加 载 电子 地 图 MapView 控件 。 

用 同样 的 方式 来 设计 其 他 二 级 界面 ,如 图 8. 4-5、 

图 8. 4-6 及 图 8. 4-7 所 示 。 空 白 区 域 为 地 图 加 载 区 。 需 要 注意 的 是 ,起 始点 输入 框 在 运行 
的 时 候 会 以 Dialog 对 话 框 的 形式 加 载 而 不 是 以 Activity 的 形式 加 载 。 


m 请 输入 地 址 。。。 搜索 


A 


图 8. 4-4 主 界 面 效 果 图 图 8. 4-5 地址 搜索 界面 图 
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qo 
图 8.4-6 路径 搜索 界面 图 图 8.4-7 起 始点 对 话 框 


在 src 文件 夹 下 的 包 com. esri. arcgis. android. samples. 
helloworld 中 新 建 一 个 Java 源 文件 ,命名 为 MainActivity。 [© comerarcgsandroidsampleshelowond HelloWorld 


java, 作 为 程序 的 主 界面 ,需要 实现 如 下 功能 : 地 图 加 载 , 实 = gems poe 
现 定位 ,通过 菜单 切换 不 同类 型 的 地 图 ,通过 按钮 控件 启动 A 


二 级 界面 等 。 该 类 的 设计 类 图 如 图 8. 4-8 所 示 。 ee 


a mOceansMenultem: Menultem 


要 实现 选项 菜单 切换 不 同类 型 的 地 图 ,需要 在 类 的 属 | & nem Mentem 


2 mNationalMenultem: Menultem 


oe "S 2 mOsmMenultem: Menultem 
性 中 声明 地 图 切换 选项 ,代码 如 下 : 4 mouthere Meriter 

a mTopoBasemap: MapOptions 

P a mStreetsBasemap: MapOptions 

// 菜 单 的 地 图 切换 选项 Segue MEET 
MenultemmStreetsMenultem - null; a mOceansBasemap: MapOptions 

2 mHybridBasemap: MapOptions 
MenultemmTopoMenuItem - null; a mNationalBasemap: MapOptions 


2 mOsmBasemap: MapOptions 


MenultemmGrayMenuItem = null; 2 mSattliteBasemap: MapOptions 


MenulItemmOceansMenultem = null; a amare tere Polygon 
= btzoomin: ZoomButton. 
MenultemmHybridMenuItem = null; = btzoomout: ZoomButton 
MenuItemmNationalMenuItem = null; E enden 
MenulItemmOsmMenultem = null; 2 btloc Button. 
P © btnavigation: Button 
MenuItemmSattliteItem = null; 2 Moc TedView 
图 六 © onCreate(savedinstanceState: Bundle): void 
// 为 每 种 地 图 选项 创建 地 图 类 型 © onCreateOptionsMenu(menu: Menu): boolean 
finalMapOptionsmTopoBasemap = newMapOptions(MapType. © onOptionsltemSelected(item: Menultem): boolean 
© onPause() void 
TOPO) ; onResume(: void 


finalMapOptionsmStreetsBasemap = newMapOptions(MapType. 
STREETS) ; 图 8. 4-8 主 界面 类 图 设计 图 
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finalMapOptionsmGrayBasemap = newMapOptions(MapType. GRAY); 
finalMapOptionsmOceansBasemap - newMapOptions(MapType. OCEANS) ; 
finalMapOptionsmHybridBasemap = newMapOptions(MapType. HYBRID); 
finalMapOptionsmNationalBasemap = newMapOptions( 

MapType. NATIONAL GEOGRAPHIC); 
finalMapOptionsmOsmBasemap = newMapOptions(MapType. OSM) ; 
finalMapOptionsmSattliteBasemap = newMapOptions(MapType. SATELLITE) ; 


实现 创建 选项 菜单 的 方法 onCreateOptionsMenu ,代码 如 下 : 


public booleanonCreateOptionsMenu(Menumenu) ( 
getMenuInflater(). inflate(R. menu. basemap menu, menu) ; 
mStreetsMenuItem = menu.getItem(0); 
mTopoMenuItem = menu. getItem(1) ; 
mGrayMenultem = menu. getItem(2) ; 
mOceansMenuItem = menu. getItem(3); 
mHybridMenuItem = menu. getItem(4) ; 
mNationalMenuItem = menu. getItem(5) ; 
mOsmMenultem = menu. getItem(6) ; 
mSattliteItem = menu. getItem(7) ; 
mTopoMenultem. setChecked( true); 
return true; 


} 
为 选项 菜单 的 菜单 项 添加 点 击 事件 ,这 样 可 以 实现 用 菜单 来 切换 地 图 类 型 的 功能 。 具 
体 代码 如 下 : 


public booleanonOptionsItemSelected(Menultemitem) { 

mCurrentMapExtent = mMapView.getExtent(); 

// 处 理 菜单 选中 的 事件 

switch (item. getItemId()) { 

case R. id. World_Street_Map: 
mMapView. setMapOpt ions(mStreetsBasemap) ; 
mStreetsMenuItem. setChecked(true) ; 
return true; 

case R. id. World_Topo: 
mMapView. setMapOpt ions(mTopoBasemap) ; 
mTopoMenultem. setChecked(true) ; 
return true; 

case R. id. Gray: 
mMapView. setMapOpt ions(mGrayBasemap) ; 
mGrayMenultem. setChecked(true) ; 
return true; 

case R. id. Ocean_Basemap: 
mMapView. setMapOpt ions(mOceansBasemap) ; 
mOceansMenultem. setChecked(true) ; 
return true; 
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case R. id. Hybrid: 
mMapView. setMapOpt ions(mHybridBasemap) ; 
mHybridMenultem. setChecked( true); 
return true; 

case R. id. Osm: 
mMapView. setMapOpt ions(mOsmBasemap) ; 
mOsmMenultem, setChecked( true); 
return true; 

case R. id. National: 
mMapView. setMapOpt ions(mNationalBasemap) ; 
mNationalMenultem. setChecked( true) ; 
return true; 

case R. id. Satellite: 
mMapView. setMapOpt ions(mSattliteBasemap) ; 
mSattliteItem. setChecked(true) ; 
return true; 

default: 
return super. onOptionsItemSelected( item); 


) 


要 实现 手机 定位 功能 ,需要 在 清单 文件 AndroidManifest. xml 中 添加 相应 用 户 使 用 
权限 。 

<uses— permissionandroid:name = "android. permission. INTERNET" /> 

« uses - permissionandroid:name = "android. permission. WRITE EXTERNAL STORAGE"/> 

< uses - permissionandroid:name = "android. permission. ACCESS FINE LOCATION" /> 

在 该 类 文件 中 添加 如 下 代码 ,实现 加 载 底 图 图 层 和 定位 图 层 ,通过 实例 化 
LocationDisplayManager 这 个 类 来 调用 该 类 的 GPS 定位 功能 。 


MapViewmMapView; 
GraphicsLayergLayerGps; 
Locationloc; 
public void onCreate(BundlesavedInstanceState) { 
super. onCreate(savedInstanceState) ; 
setContentView(R. layout. main) ; 
mMapView = (MapView) findViewById(R. id. map); 
glayerGps = newGraphicsLayer(); 
mMapView. addLayer(gLayerGps); 
finalLocationDisplayManagerlocdisplayMag; 
locdisplayMag = nMapView.getLocationDisplayManager(); 
locdisplayMag. setLocationListener(newLocationListener() { 
@Override 
public void onStatusChanged(String provider, intstatus, 
Bundleextras) { 


360 «| WebGIS 工 程 项 目 开 发 实践 


GOverride 
public void onProviderEnabled(String provider) { 
Toast.makeText(getApplicationContext(), "GPS 已 启用 ."， 
Toast.LENGTH SHORT).show(); 
H 
@Override 
public void onProviderDisabled( String provider) { 
Toast. makeText(getApplicationContext(), "GPS 未 启用 ,请 开启 ."， 
Toast.LENGTH SHORT).show(); 
) 
@override 
public void onLocationChanged(Locationl) ( 
if (1 != null) { 
PointptLatLon = newPoint(l.getLongitude(), 1 
.getLatitude()); 
SpatialReferencesr4326 = SpatialReference. create(4326) ; 
PointptMap = (Point) GeometryEngine. project(ptLatLon, 
sr4326, mMapView. getSpatialReference( ) ) ; 
mMapView. centerAt(ptMap, true) ; 
tvloc. setText("Lon:" + l.getLongitude() + ",Lat" 
+ l.getLatitude()); 


} 
Di 
// 启动 定位 服务 
locdisplayMag. start(); 


实现 了 定位 功能 之 后 ,还 需要 进一步 完善 这 个 类 文件 ,由 于 是 程序 的 主 类 ,因此 我 们 需 
要 添加 调用 其 他 二 级 界面 的 入口 和 功能 , 主 界面 布局 文件 main, xml 中 已 经 添加 了 3 个 调 
用 按钮 ,因此 在 MainActivity. java 文件 中 ,需要 通过 控件 id 找到 按钮 ,然后 绑 定 相 应 的 事 
件 。 需 要 注意 的 是 ,Activity 之 间 的 调用 使 用 的 是 Intent 这 样 一 个 消息 传递 类 ,具体 代码 
如 下 : 


private Buttonbtnearby = null; 
private Buttonbtrouter = null; 
private Buttonbtnavigation = null; 
btnearby = (Button) findViewById(R. id. btnear); 
btrouter = (Button) findViewById(R. id.btrouter); 
btnavigation = (Button) findViewById(R. id. btnavigation) ; 
// 为 搜索 按钮 设置 按钮 监听 器 
btnearby. setOnClickListener(newOnClickListener() { 
@Override 
public void onClick(Viewv) { 
Intentintent = newIntent(); 
intent. setClassName(getApplicationContext(), 
"com. esri.arcgis. android. samples. helloworld. PlaceSearchActivity" ) ; 


startActivity(intent); 


D; 
// 为 路 径 按钮 设置 按钮 监听 器 
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btrouter. setOnClickListener(newOnClickListener() ( 


@Override 
public void onClick(Viewv) { 
Intentintent = newIntent(); 


intent. setClassName(getApplicationContext(), 
"com. esri. arcgis. android. samples. routing. RoutingActivity"); 


startActivity( intent) ; 


Di 
// 为 导航 按钮 设置 监听 事件 


btnavigation. setOnClickListener(newOnClickListener() { 


@override 
public void onClick(Viewv) { 
Intentintent = newIntent(); 


intent. setClassName(getApplicationContext(), 


"com. esri. arcgis. android. samples. routing. RoutingActivity"); 


startActivity( intent); 


D 


在 这 个 包 下 再 新 建 一 个 java 类 文件 ,命名 为 
PlaceSearch. java, 用 于 实现 位 置 搜索 的 相关 功能 。 
地 址 搜索 PlaceSearch 类 的 设计 如 图 8. 4-9 所 示 。 

PlaceSearch. java 这 个 类 首先 要 完成 的 功能 就 
是 加 载 基 本 的 地 图 ,然后 获取 输入 框 中 用 户 输 入 的 
地 址 ,实现 上 述 功能 的 具体 代码 如 下 : 


// 创建 ArcGIS HR 
MapViewmMapView; 
ArcGISTiledMapServiceLayerbasemap; 
GraphicsLayerlocationLayer; 
Locatorlocator; 
LocatorGeocodeResultgeocodeResult; 
CalloutlocationCallout; 
GeocoderTaskmWorker; 
PointmLocation = null; 
// 用 于 映射 点 的 空间 索引 


© com.esr.arcgis.android.samples.helloworld PlaceSearchActivity 


a mMapView: MapView 
a basemap: ArcGlSTiledMapServiceLayer 

a locationLayer: GraphicsLayer 

4 locator: Locator 

a geocodeResult: LocatorGeocodeResult 

a locationCallout: Callout 

a mWorker: GeocoderTask 

a mlocation: Point 

a wm: SpatialReference 

a egs: SpatialReference 

& dialog: ProgressDialog 

a handler: Handler 

à geocodeLabel: TetView 

a addressText: EditText 

a btsearch: Button 

© onCreste(savedinstanceState: Bundle): void 
@ onRetainNonConfigurationinstance(): Object 
© locate(view: View): void 

m setSearchParams(address: String): void 

m loadView(address: String): View 

© onDestroy(: void 

 onPause(: void 

 onResume(: void 


8.4-9 PlaceSearch 类 的 设计 图 


finalSpatialReferencewm = SpatialReference. create(102100); 
finalSpatialReferenceegs = SpatialReference.create(4326); 


// 创建 开 组 件 
Static ProgressDialogdialog; 
Static Handlerhandler; 
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// 为 EditText 设 定 标签 
TextViewgeocodeLabel; 
// 输入 地 址 的 EditText 控件 
EditTextaddressText; 
Buttonbtsearch - null; 

public void onCreate(BundlesavedInstanceState) ( 


super. onCreate(savedInstanceState); 
setContentView(R. layout. placesearch); 
mWorker = (GeocoderTask) getLastNonConf igurationInstance(); 
if (mWorker != null) { 
mWorker.mActivity = newWeakReference < PlaceSearchActivity (this); 
} 
// 创建 handler 来 更 新 UI 
handler = newHandler(); 
// 绑 定 视图 中 的 TextView 控件 并 设置 初始 显示 的 内 容 
geocodeLabel = (TextView) findViewById(R. id. geocodeLabel); 
geocodeLabel.setText(getString (R.String .geocode label)); 
// 绑 定 视图 中 的 EditText 控件 以 及 Button 控件 
addressText = (EditText) findViewById(R. id. etsearch); 
btsearch = (Button) findViewById(R. id. btsearch); 
// 检索 map 控件 并 从 XML 布局 文件 设置 初始 显示 
mMapView = (MapView) findViewById(R. id. map); 
/* 从 给 定 地 址 加 载 在 线 专题 图 层 * / 
basemap = newArcGISTiledMapServicelayer(this.getResources().getString ( 
R.String .basemap url)); 
mMapView. addLayer(basemap); 
// 添加 定位 图 层 
locationLayer = newGraphicsLayer(); 
mMapView. addLayer(locationLayer); 
// 获取 地 位 服务 并 读 取 位 置信 息 
LocationServicelocationSrv = mMapView.getLocationService(); 
locationSrv. setLocationListener(newMyLocationListener()); 
locationSrv.start(); 
mMapView. enableWrapAround(true); 


实现 了 基本 地 图 的 加 载 之 后 ,将 用 户 输入 的 地 址 编码 为 经 纬度 信息 ,然后 显示 在 地 图 
上 ,地 理 编码 任务 采用 异步 线程 处 理 的 方式 ,具体 代码 如 下 : 


private classGeocoderTask extends AsyncTask < LocatorFindParameters, Void , 


List < LocatorGeocodeResult >> { 


WeakRef erence < PlaceSearchActivity » mActivity; 
GeocoderTask(PlaceSearchActivityactivity) { 

mActivity = newWeakReference < PlaceSearchActivity »(activity); 
} 
// 地 理 编 码 后 的 结果 作为 一 个 参数 传递 给 地 图 控件 
protectedvoid onPostExecute(List < LocatorGeocodeResult > result) { 
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if (result == null || result.size() == 0) { 
// 如 果 没 有 搜索 到 结果 则 更 新 UL, 用 toast 显示 未 找到 
Toasttoast = Toast.makeText(PlaceSearchActivity. this, "未 找到 ", 
Toast.LENGTH LONG); 
toast. show() ; 
) eise( 
// 更 新 全 局 搜索 结果 
geocodeResult = result.get(0); 
// 搜索 时 显示 进度 弹 窗 
dialog = ProgressDialog. show(mMapView.getContext(), 
"Geocoder" , "搜索 中 .……… "s 
// 从 地 理 编 码 结果 中 返回 几何 对 象 
GeometryresultLocGeom = geocodeResult.getLocation(); 
// 创建 一 个 点 符号 来 显示 找到 的 位 置 
SimpleMarkerSymbolresultSymbol = newSimpleMarkerSymbol( 
Color.BLUE, 20, SimpleMarkerSymbol. STYLE. CIRCLE) ; 


// 创建 图 像 要 素来 标示 找到 的 结果 
GraphicresultLocation = newGraphic(resultLocGeom, 
resultSymbol) ; 


// 将 创建 的 符号 添加 到 图 层 上 显示 
locationLayer. addGraphic(resultLocation); 
// 创建 文字 信息 来 显示 返回 的 信息 
TextSymbolresultAddress = newTextSymbol(12, 
geocodeResult. getAddress(), Color. BLACK); 
resultAddress. setOffsetX(10); 
resultAddress. setOffsetY(50); 
// 创建 一 个 弹 窗 来 显示 位 置信 息 
GraphicresultText = newGraphic(resultLocGeom, resultAddress); 
locationLayer. addGraphic(resultText); 
// 地 图 自动 缩放 到 当前 搜索 到 的 位 置 
mMapView. zoomToResolution(geocodeResult.getLocation(), 2); 
// 创建 一 个 线程 来 将 消息 添加 到 消息 队列 
handler. post(newMyRunnable()); 
) 
} 
// 调用 后 台 线 程 来 呈现 地 理 编码 任务 
@Override 
protectedList < LocatorGeocodeResult > doInBackground( 
LocatorFindParameters... params) { 
// 创建 并 初始 化 一 个 List 对 象 来 存放 返回 的 结果 
List < LocatorGeocodeResult > results = null; 
// 设置 地 理 编码 服务 
locator = Locator. createOnlineLocator(getResources().getString ( 
R. String .geocode url)); 
try { 
// 将 地 址 传递 给 搜索 方法 
results = locator.find(parans[0]); 
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} catch (Exceptione) { 
e. printStackTrace(); 


) 
// 返回 搜索 到 的 结果 


return results; 


} 


由 于 实现 路 径 导 航 功 能 稍微 有 些 复杂 ,因此 为 了 让 项 目的 层次 更 分 明 ,我 们 重新 生成 一 个 
包 , 命 名 为 com. esri. arcgis. android. samples. routing, 在 这 个 包 下 面 需要 编写 一 个 路 径 界面 实 
现 类 RoutingActivity. java, 一 个 用 于 展示 搜索 路 径 结果 的 抽 展 RoutingListFragment. java, — 4 
用 于 接收 用 户 输入 起 始 地 址 的 对 话 框 RoutingDialogFragment. java, 以 及 一 个 为 搜索 出 的 
路 径 片 段 适 配 的 适配器 My Adapter. java. 

在 com. esri. arcgis. android. samples. routing 下 新 建 一 个 java 类 文件 ,命名 为 RoutingLi- 
stFragment, 继承 Fragment 超 类 并 实现 ListView 中 的 OnItemClickListener 接口 和 
TextToSpeech 中 的 OnInitListener 接口 ,实现 ListView. OnltemClickListener 接口 是 为 了 
重 写 该 接口 中 的 方法 ,通过 实例 化 onDrawerListSelectedListener 监听 器 来 处 理 路 径 片段 中 
的 点 击 事件 。TextToSpeech. OnInitListener 顾名思义 就 是 文字 转 语 音 的 监听 器 ,通过 该 接 
口 可 以 实现 语音 提醒 的 相关 功能 。 

首先 在 RoutingListFragment 中 声明 该 类 的 若干 属性 ,以 及 一 个 用 于 检测 语音 是 否 开 
启 的 标志 变量 。 源 代码 如 下 : 

public Static ListViewmDrawerList; 

onDrawerListSelectedListenermCallback; 


private TextToSpeechtts; 
private booleanisSoundOn - true; 


HS onAttach 方法 和 onCreate 方法 .具体 代码 如 下 : 


@oOverride 
public void onCreate(BundlesavedInstanceState) { 
super. onCreate(savedInstanceState) ; 
} 
@Override 
public void onAttach(Activityactivity) { 


super. onAttach(activity) ; 
try { 

mCallback = (onDrawerListSelectedListener) activity; 
} catch (ClassCastExceptione) { 

th rownewClassCastException(activity. toString () 

+ " mustimplementonDrawerListSelectedListener" ) ; 


) 


seth asOptionsMenu(true) ; 
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此 外 ,还 要 重 写 onActivityCreated 方法 ,具体 代码 如 下 : 


GOverride 
public void onActivityCreated(BundlesavedInstanceState) { 
super. onActivityCreated(savedInstanceState); 
tts = newTextToSpeech(getActivity(), this); 
MyAdapteradapter = newMyAdapter(getActivity(), 
RoutingActivity.curDirections); 
mDrawerList = (ListView) getActivity().findViewById(R. id. right drawer); 
mDrawerList.setAdapter(adapter); 
mDrawerList. setOnItemClickListener(this) ; 
Switchsound toggle = (Switch) getActivity().findViewById(R. id. switch1) ; 
sound_toggle. setOnCheckedChangeListener(newOnCheckedChangeListener() { 
@Override 
public void onCheckedChanged(CompoundButtonbuttonView, 
booleanisChecked) { 
isSoundOn = isChecked; 


Dp 
) 


接 下 来 要 做 的 就 是 实现 选项 菜单 的 创建 选项 菜单 中 选项 是 否 被 选中 以 及 选中 之 后 要 
做 的 处 理 。 重 写 方法 onCreateOptionsMenu 通过 传人 菜单 和 菜单 填充 器 来 生成 菜单 ,具体 
代码 如 下 : 


@Override 
public void onCreateOptionsMenu(Menumenu, MenuInflaterinflater) { 
inflater. inflate(R. menu. action_layout, menu); 


) 
然后 是 选项 选中 事件 的 监听 ,通过 重 写 onOptionsItemSelected 方法 ,实现 对 自 定 义 菜 
单 中 选项 是 否 选 中 事件 的 判断 ,返回 一 个 布尔 类 型 的 值 。 


@Override 
public booleanonOptionsItemSelected(Menultemitem) { 
switch (item. getItemId()) { 
caseR. id. direction: 
if (RoutingActivity. mDrawerLayout. isDrawerOpen(Gravity.END)) { 
Rout ingActivity. mDrawerLayout. closeDrawers(); 
} eise { 
RoutingActivity. mDrawerLayout. openDrawer(Gravity. END) ; 
) 
return true; 
default: 
return super. onOptionsItemSelected( item); 
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当 上 述 过 程 全 部 完成 之 后 , 接 下 来 要 做 的 就 是 实现 菜单 中 的 某 个 选项 被 选中 之 后 需要 
调用 的 方法 。 通 过 重 写 onltemClick 方法 来 实现 自 定义 的 功能 ,在 该 工程 中 ,我 们 需要 实现 
的 就 是 当 抽 层 中 的 某 一 项 被 选中 之 后 ,隐藏 册 慑 并 跳 转 到 之 前 生成 的 路 径 对 应 的 路 径 片段 ， 
同时 ,通过 检测 语音 提醒 开关 的 状态 来 触发 语音 提醒 事件 。 具 体 代码 如 下 


@Override 
public void onItemClick(AdapterView <?> parent, Viewview, intposition, 
longid) { 
TextViewsegment = (TextView) view. findViewById(R. id. segment) ; 
RoutingActivity. nDrawerLayout.closeDrawers(); 
if (isSoundOn) 
speakOut ( segment. getText(). toString ()); 
mCallback. onSegnentSelected(segnment. getText().toString ()); 
} 


在 com. esri. arcgis. android. samples. routing 下 新 建 一 个 java 类 文件 ,命名 为 RoutingD- 
ialogFragment, 继 承 DialogFragment 超 类 并 实现 OnFocusChangeListener 接口 和 OnClickL- 
istener 接口 。OnFocusChangeListener 接口 用 于 当 视 图 的 焦点 状态 改变 时 回调 的 一 个 接 
口 。 该 对 话 框 用 于 接收 用 户 输 入 的 起 始 地址 。 

声明 UI 控件 和 绑 定 视图 中 的 对 应 的 控件 ,具体 代码 如 下 : 


EditTextet source; 
EditTextet destination; 
Locatorlocator; 
Static ProgressDialogdialog; 
Static Handlerhandler; 
ButtonbGetRoute; 


EE onAttack 方法 ,用 于 绑 定 fragment 到 调用 的 Activity C3 ln : 


@Override 
public void onAttach(Activityactivity) { 

super. onAttach(activity) ; 

try { 
mCallback = (onGetRoute) activity; 

} catch (ClassCastExceptione) { 
th rownewClassCastException(activity. toString () 
+ " mustimplementonDrawerListSelectedListener" ) ; 


} 
从 布局 文件 加 载 对 话 框 视图 ,通过 重 写 onCreat View 方法 来 实现 对 话 框 的 调用 .显示 
以 及 事件 的 处 理 ,具体 代码 如 下 : 


GOverride 
public ViewonCreateView(LayoutInflaterinflater, ViewGroupcontainer, 
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BundlesavedInstanceState) { 
Viewview = inflater. inflate(R. layout.dialog layout, container); 
// 加 载 XML 布局 视图 
et source = (EditText) view.findViewById(R. id.et source); 
et destination - (EditText) view.findViewById(R. id. et destination); 
img sCancel = (ImageView) view.findViewById(R. id. iv cancelSource); 
img dCancel = (ImageView) view. findViewById(R. id. iv cancelDestination); 
img swap = (ImageView) view. findViewById(R. id. iv interchange); 
img myLocaion = (ImageView) view. findViewById(R. id. iv nyDialogLocation); 
bGetRoute = (Button) view. findViewById(R. id. bGetRoute) ; 
// 为 EditText 控件 添加 自 定义 监听 器 
et source. addTextChangedListener(newMyTextWatcher(et source)); 
et destination 
. addTextChangedListener(newMyTextWatcher(et destination)); 
// 为 EditText 控件 添加 焦点 事件 监听 器 
et source. setOnFocusChangeListener(this); 
et destination. setOnFocusChangeListener(this); 
// 为 图 标 和 对 话 添加 点 击 事件 监听 器 
img dCancel. setOnClickListener(this); 
img sCancel. setOnClickListener(this); 
img swap. setOnClickListener(this) ; 
img myLocaion. setOnClickListener(this); 
// 为 按钮 添加 点 击 事件 监听 器 
bGetRoute. setOnClickListener(newOnClickListener() ( 
@override 
public void onClick(Viewv) { 
source = et_source. getText(). toString (); 
destination = et destination.getText(). toString (); 
// 如 果 EditText 中 的 任何 一 个 为 空 则 用 toast 显示 提示 信息 
if (source.equals("") || destination.equals("")) { 
Toast. makeText(getActivity(), "Placecannotbeempty", 
Toast. LENGTH LONG).show(); 
return ; 


) 

// 检查 EditText 中 是 否 含有 "MyLocation" 

if (source. equals("MyLocation")) 
src isMyLocation = true; 

if (destination. equals("MyLocation")) 
dest isMyLocation - true; 

// 如 果 起 始 地 址 不 同 则 开始 地 理 编码 

if (!source. equals(destination)) ( 
geocode(source, destination); 

} eise( 
Toast. makeText(getActivity(), 
"SourceandDestinationshouldbedifferent", 

Toast.LENGTH LONG).show(); 
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H 
D); 
// 移 除 对 话 框 上 的 title 
getd ialog().getWindow().requestFeature(Window. FEATURE NO TITLE); 
return view; 


) 


当 对 话 框 把 用 户 输入 的 地 址 传人 之 后 ,需要 一 个 地 理 编 码 类 来 实现 将 地 址 转换 为 经 纬 
度 的 值 , 然 后 再 发 送 请 求 到 服务 器 ,服务 器 查询 出 路 线 后 返回 给 客户 端 ,考虑 到 地 理 编码 任 
务 和 路 径 查 询 会 占用 较 多 的 时 间 , 因 此 为 了 不 阻塞 UI 线 程 的 更 新 ,最 好 的 办 法 是 将 地 理 编 
码 和 路 径 查询 任务 放 到 后 台 处 理 ,通过 继承 AsyncTask 类 定义 一 个 内 部 类 Geocoder KH 
装 上 述 的 方法 和 属性 ,具体 实现 代码 如 下 : 


private classGeocoder extends AsyncTask < Void , Void , Void» ( 
// 定位 找到 起 始 地 址 
LocatorFindParameterslfp start, lfp dest; 
// 构造 函数 
public Geocoder(LocatorFindParametersfindParams start, 
LocatorFindParametersfindParams dest) { 
lfp start = findParams start; 
lfp dest = findParams dest; 
} 
@override 
protectedvoid onPreExecute() { 
super. onPreExecute( ) ; 
// 显示 进度 对 话 框 
dialog = ProgressDialog. show(getActivity(), "获取 路 线 ", "正在 编码 地 址 .….…."); 
} 
@override 
protectedVoid doInBackground(Void ... params) { 
// 设置 地 理 编码 服务 
locator = Locator.createOnlineLocator(getResources().getString ( 
R.String .geocode url)); 
try ( 
// 通过 地 址 找到 方法 返回 点 代表 的 地 址 
if (!src isMyLocation) 
result origin - locator.find(lfp start); 
if (!dest isMyLocation) 
result destination - locator.find(lfp dest); 
} catch (Exceptione) { 
e. printStackTrace( ) ; 
} 
return null; 
} 
// 地 理 编码 任务 的 结果 作为 一 个 参数 传递 给 地 图 
@Override 
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protectedvoid onPostExecute(Void result) ( 
super. onPostExecute(result); 
handler. post(newMyRunnable()) ; 
Pointpl - null; 
Pointp2 - null; 
// 将 当前 位 置 输出 到 空间 索引 
PointcurrLocation = (Point) GeometryEngine. project( 
RoutingActivity. mLocation, egs, wm); 
// 将 Mylocation 的 值 赋 给 当前 位 置 
if (src_isMyLocation) 
pl = currLocation; 
elseif (result origin. size()>0) 
pl = result origin.get(0).getLocation(); 
if (dest_isMyLocation) 
p2 = currLocation; 
elseif (result destination. size()» 0) 
p2 = result destination. get(0).getLocation(); 
if (pl == null) { 
Toast.makeText(getActivity(), "地址 无 效 ",，Toast. LENGTH LONG).show(); 
} elseif (p2 null) ( 
Toast. makeText(getActivity(), "Shh 36%", Toast. LENGTH LONG).show(); 
} else 
mCallback. onDialogRouteClicked(pl, p2); 


} 
地 理 编 码 方法 需要 传人 两 个 参数 


起 点 和 终点 ,具体 实现 代码 如 下 : 


private void geocode(String addressl, String address2) ( 
try { 
// 从 传人 的 地 址 创建 定位 参数 
LocatorFindParametersfindParams source = newLocatorFindParameters(address1) ; 
// 设置 搜索 国家 为 美国 
findParams source. setSourceCountry("USA"); 
// 设 定 搜索 结果 的 数目 为 2 条 
findParams source. setMaxLocations(2); 
// 设置 地 址 空间 索引 来 匹配 地 图 
findParams source. setOutSR 
(RoutingActivity. map. getSpatialReference()); 
// 执行 异步 任务 地 理 编码 地 址 
LocatorFindParametersfindParams dest = newLocatorFindParameters(address2); 
findParams dest. setSourceCountry("USA"); 
findParams dest. setMaxLocations(2) ; 
findParams dest.setOutSR 
(RoutingActivity.map.getSpatialReference()); 
Geocodergcoder = newGeocoder(findParams source, findParams dest); 
gcoder. execute() ; 
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} catch (Exceptione) { 
e. printStackTrace(); 
} 
} 


接 下 来 为 EditText 控件 设置 监听 器 , 主要 实现 监听 内 容 是 否 为 空 , 并 且 当 起 点 
EditText 和 目的 地 EditText 都 不 为 空 时 ,将 cross 图 标 设置 为 可 用 ,cross 图 标 用 于 将 起 始 
地 文本 框 中 的 内 容 交换 ,具体 代码 如 下 : 


private classMyTextWatcherimplementsTextWatcher { 
private Viewview; 
private MyTextWatcher(Viewview) { 
this.view = view; 
} 
public void beforeTextChanged 
(CharSequencecharSequence, inti, intil,inti2) {} 
public void onTextChanged(CharSequencecharSequence, inti, intil, inti2) {} 
public void afterTextChanged(Editable editable ) { 
// 34 EditText 控件 内 容 不 为 空 时 , 显示 cross 图 标 
String text = editable .toString (); 
Switch (view.getId()) ( 
case R. id.et source: 
if (text. length ()> 0) 
img sCancel. setVisibility(View. VISIBLE); 
else 
img sCancel.setVisibility(View. INVISIBLE); 
break; 
case R. id.et destination: 
if (text. length ()> 0) 
img dCancel. setVisibility(View. VISIBLE) ; 
else 
img dCancel.setVisibility(View. INVISIBLE); 
break; 


) 


在 com. esri. arcgis. android. samples. routing 下 新 建 一 个 java 类 并 命名 为 RoutingListFra- 
gment, 继 承 ListView. OnltemClickListener 接口 和 TextToSpeech. OnlnitListener 接口 。 
重 写 onAttach 方法 ,具体 代码 如 下 : 


@Override 
public void onAttach(Activityactivity) { 
super. onAttach(activity) ; 
try { 
mCallback = (onDrawerListSelectedListener) activity; 
} catch (ClassCastExceptione) { 
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th rownewClassCastException(activity.toString () 
* " mustinplementonDrawerListSelectedListener"); 
} 
seth asOptionsMenu(true) ; 


} 
HS onActivityCreated 方法 ,具体 代码 如 下 : 


@Override 
public void onActivityCreated(BundlesavedInstanceState) { 
super. onActivityCreated(savedInstanceState) ; 
tts = newTextToSpeech(getActivity(), this); 
MyAdapteradapter = newMyAdapter(getActivity(), 
Rout ingActivity. curDirections) ; 
mDrawerList = (ListView) getActivity().findViewById(R. id. right drawer); 
mDrawerList.setAdapter(adapter); 
mDrawerList. setOnItemClickListener(this) ; 
Switchsound toggle = (Switch) getActivity().findViewById(R. id. switch) ; 
sound toggle. setOnCheckedChangeListener(newOnCheckedChangeListener() { 
@override 
public void onCheckedChanged( CompoundButtonbuttonView, 
booleanisChecked) { 
isSoundOn - isChecked; 


Dp 
) 


创建 选项 菜单 和 菜单 中 选项 的 点 击 事件 监听 ,具体 代码 如 下 : 


@Override 
public void onCreateOptionsMenu(Menumenu, MenuInflaterinflater) { 
inflater. inflate(R. menu. action_layout, menu); 
} 
@override 
public booleanonOptionsItemSelected(Menultemitem) { 
switch (item. getItemId()) { 
caseR. id. direction: 
if (RoutingActivity. mDrawerLayout. isDrawerOpen(Gravity. END)) { 
Rout ingActivity. mDrawerLayout. closeDrawers(); 
} else { 
Rout ingActivity. mDrawerLayout. openDrawer(Gravity. END); 
) 
return true; 
default: 
return super. onOptionsItemSelected( item); 


) 
@oOverride 
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public void onItemClick(AdapterView <?> parent, Viewview, intposition, 
longid) ( 
TextViewsegnent - (TextView) view. findViewById(R. id. segment) ; 
RoutingActivity. mDrawerLayout. closeDrawers() ; 
if (isSoundOn) 
speakOut( segment. getText(). toString ()); 
mCallback. onSegmentSelected(segnent.getText().toString ()); 
} 


至 此 ,主要 的 功能 代码 实现 已 经 完成 , 接 下 来 需要 做 的 就 是 运行 和 调试 上 述 功 能 能 否 正 
常 运行 以 及 出 错 之 后 如 何 根据 报错 来 调试 。 
8.4.5 经 纬度 路 径 生 成 模块 
路 径 生 成 模块 用 例 图 (工具 栏 ) 如 图 8. 4-10 所 示 。 
图 8. 4-10 路径 生成 模块 用 例 图 


(1) 线路 添加 选择 : 最 多 可 选 3 条 路 线 。 

(2) 添加 停靠 点 : 双击 地 图 添加 停靠 点 。 

(3) 清除 停靠 点 : 清除 地 图 上 添加 的 停靠 点 。 

(4) 添加 障碍 点 : 双击 地 图 添加 障碍 点 。 

C5) 清除 障碍 点 : 清除 地 图 上 添加 的 障碍 点 。 

(6) 产生 路 径 : 单 击 在 地 图 上 产生 两 点 之 间 的 最 优 路 径 。 
(7) 清除 线路 : 清除 地 图 上 产生 的 路 径 。 

1. 添加 道路 的 要 素 图 层 

添加 道路 的 要 素 图 层 代码 如 下 : 


var main_streets = new FeatureLayer("http://localhost:6080/arcgis/rest/services/ 
hangzhou/ % E4 % BA % A4 % E9 % 80 % 9A % E6 % 8B & A5 % E5 % AO % B5/FeatureServer/0", { 
mode: FeatureLayer. MODE_ONDEMAND, 
showLabels: true, 
opacity :1, 
outFields: ['*'] 
Di 
var other streets = new eatureLayer("http://localhost :6080/arcgis/rest/services/ 
hangzhou/ % E4 % BA % A4 % E9 % 80 % 9A % E6 % 8B% A5 % E5 & A0 & BS/FeatureServer/1", { 
mode: FeatureLayer. MODE_ONDEMAND, 
showLabels: true, 
opacity :1, 
outFields: ['* '] 
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var streetmap = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/ 
rest/services/hangzhou/HZStreets/MapServer" ) ; 
map.addLayers([main streets, other streets]); 


2. 添加 停靠 点 
添加 停靠 点 代码 如 下 : 


function addStops() { 
alert("1"); 
removeEventh andlers(); 
mapOnClick addStops connect - map.on("dbl- click", addStop); 
) 
function addStop(evt) ( 
routeParams. stops. features. push( 
map. graphics. add( 
new esri.Graphic( 
evt.mapPoint, 
stopSymbol, 
{ RouteNane: don. byId("routeNane"). value } 


) 
) 
) 


3. 清除 停靠 点 
清除 停靠 点 代码 如 下 : 


//Clears all stops 
function clearStops() ( 
removeEventh andlers(); 
for (var i= routeParams. stops. features. length -1; i>=0; i--) { 
map. graphics. remove(routeParams. stops. features. splice(i, 1)[0]); 


} 
} 


4. 添加 障碍 点 
添加 障碍 点 代码 如 下 : 


//Begins listening for dbl- click events to add barriers 

function addBarriers() ( 

removeEventh andlers(); 

mapOnClick addBarriers connect - on(map, "dbl- click", addBarrier); 
} 
//Adds a barrier 
function addBarrier(evt) ( 

routeParams. barriers. features. push( 

map. graphics. add( 
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new esri.Graphic( 
evt.mapPoint, 
barrierSymbol 


) 
); 
} 


5. 清除 障碍 点 
清除 障碍 点 代码 如 下 : 


//Clears all barriers 
function clearBarriers() ( 
removeEventh andlers(); 
for (var i= routeParams. barriers. features. length - 1; i>=0; i--) ( 
map. graphics. remove( routeParams. barriers. features. splice(i, 1)[0]); 
} 
} 


6. 最 优 路 线 网 络 分 析 调 用 
最 优 路 线 网 络 分 析 调 用 代码 如 下 : 


// 两 点 之 间 最 优 路 径 选择 

routeTask = new RouteTask("http://localhost:6080/arcgis/rest/services/ 
hangzhou/HZStreets/NAServer/Route"); 

//setup the toute parameters 

routeParams = new RouteParameters() ; 

routeParams. stops = new FeatureSet(); 

routeParams. barriers = new FeatureSet(); 

routeParams. outSpatialReference = { 
"wkid" : 102100 

h 

routeTask. on("solve- complete", showRoute); 

routeTask. on("error", errorHandler); 

//define the symbology used to display the route 

stopSymbol - new SimpleMarkerSymbol().setStyle 
(SimpleMarkerSymbol.STYLE CROSS).setSize(20); 

stopSymbol.outline. setWidth (5); 

barrierSymbol = new SimpleMarkerSymbol().setStyle 
(SimpleMarkerSymbol.STYLE X).setSize(20); 

barrierSymbol.outline. setWidth (5). setColor(new Color([255,0,0])); 

routeSymbols = ( 
"Route 1": new SinpleLineSymbol().setColor(new Color([0,0,0,1])). setWidth (5), 
"Route 2": new SinpleLineSymbol().setColor(new Color([0,0,0,1])). setWidth (5), 
"Route 3": new SinpleLineSymbol().setColor(new Color([255,0,255,1])).setWidth (5) 

h 

var Symbol = new PictureMarkerSymbol ( { 
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"angle" :0, 
"xoffset":0, 
"yoffset":10, 
"type" :"esriPMS", 
"contentType" : " image/png", 
"width ":30, 
"height" :30 
D 


7. 路 线 生成 
路 线 生 成 代码 如 下 : 


//Solves the routes. Any errors will trigger the errorHandler function . 
function solveRoute() { 
removeEventh andlers(); 
routeTask. solve(routeParams); 
} 
//Draws the resulting routes on the map 
function showRoute(evt) { 
clearRoutes(); 
array.forEach(evt.result.routeResults, function (routeResult, i) { 
routes. push( 
map. graphics. add( 
routeResult. route. setSymbol(routeSymbols[ routeResult. routeName]) 
) 
E 
Di 


8. 清除 路 线 
清除 路 线 代码 如 下 : 


//Clears all routes 
function clearRoutes() ( 
for (var i= routes. length -1; i>=0; i--) { 
map. graphics. remove(routes. splice(i, 1)[0]); 


} 


routes = []; 


} 


8.4.6 导航 模块 

导航 功能 的 工具 栏 界面 如 图 8. 4-11 所 示 , 输 入 起 点 和 终点 , 单 击 导航 按钮 即 可 生成 
路 径 。 

导航 模块 具体 实现 代码 如 下 : 
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添加 目的 地 
隐藏 选 项 
目 返回 起 点 
= 
(ae E 


图 8. 4-11 导航 模块 


/输入 地 名 搜索 路 径 
var directions = new Directions({ 

map: map, 

routeTaskUrl: "http://localhost:6080/arcgis/rest/services/hangzhou/ 

HZStreets/NAServer/Route", 
routeParams: {}, 
},"directionDiv") ; 
directions. startup(); 


8.4.7 ”用户 管理 模块 


1. 注册 模块 


在 安全 注册 与 登录 操作 过 程 中 严格 验证 表单 内 容 , 以 提高 网 站 的 安全 性 ,防止 非法 用 户 
进入 网 站 。 
本 模块 中 注册 页 面 为 addUser. jsp. Ml 8. 4-12 所 示 。 


用 户 管理 添加 用 户 Lcid SA Excel 


账户 基本 信息 ( 必 十 ) 
登录 名 * 123 
RAPER [e 


用 户 个 人 信息 ( 选 填 ) 
Bim u 
手机 号 
郎 箱 
(2x) 


图 8. 4-12 用 户 注 册页 面 
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实现 注册 表单 页 面 的 关键 代码 如 下 : 


< s:include value = "commonMenu. jsp"></s:include> 
<div class = "clear"»«/div» 
<div class = "system box" 
< s:form action = "addUser" theme = "simple" meth od = "post" enctype = "multipart/form- data"> 
<table class = "system- table "> 
«tr»«th colspan= "2"> 账 户 基本 信息 ( 必 填 )</th></tr> 
<tr> 
«td width = "80px"> 登 录 名 "</td> 
«td width = "340px"» 
< s:textfield theme = "simple" name = "user. userName" cssClass = "stri290" 
regiured- "true" value =""/> 
</td> 
</tr> 
<tr> 
<td width = "80px"> 用 户 密 码 * </td> 
«td width = "340px"» 
< s: password theme = "simple" name = "user. userPassword " 
cssClass = "psdi290" value= ""/» 
</td> 
</tr> 
<tr> 
<td width = "80px"> 用 户 组 别 " </td> 
<td width = "340px"> 
< selectclass = "select1" name "user. userLevel"> 
<option value = "0"> 超 级 管理 员 </option > 
< option value = "1"> 管 理 员 </option> 
<option value = "2" selected > 普通 用 户 </option> 
</ select></td> 
</tr> 
<tr>< th colspan = "2"> 用 户 个 人 信息 ( 选 填 )</th></tr> 
<tr> 
«td width = "80px"> 真 实 姓 名 </td> 
«td width = "340px"» 
< s:textfield theme = "simple" name = "user. userRealName" 
cssClass = "stri290" value = ""/» 
</td> 
</tr> 
<tr> 
<td width = "80px"> 手 机 号 </td> 
<td width = "340px"> 
<s:textfield theme = "simple" name = "user. userMobile" 
cssClass = "stri290" value = ""/» 
</td> 
</tr> 
<tr> 
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«td width = "80px"> 邮 箱 </td> 
«td width = "340px"> 
< s:textfield theme = "simple" name = "user. userEmail" 
cssClass = "stri290" value= ""/» 
</td> 
</tr> 
<tr> 
<td width = "80px"></td> 
<td width = "340px"> 


< input type = "submit" class = "system - button" value = "提交 "/> 


</td> 
</tr> 
</table> 
</s:form> 
2. 登录 模块 


登录 模块 流程 如 图 8. 4-13 所 示 。 


显示 错误 信息 显示 错误 提示 
错误 


Heu J > 正确 一 > 是 = | 显示 正确 提示 


图 8.4-13 登录 模块 的 流程 


前 台 与 后 台 的 登录 验证 方法 基本 一 致 ,只 是 前 台 登 录 保 mm 

存 的 是 登录 的 用 户 信 息 ,后 台 登 录 保存 的 是 登录 系统 的 管理 | a 

员 基 本 信息 ,登录 界面 如 图 8. 4-14 所 示 。 = 
前 台 与 后 台 的 登录 页 面 代码 方式 相同 ,以 前 台 登 录 页 面 

为 例 , 其 关键 代码 如 下 : 


8.4-14 登录 界面 
< s:form action= "login" meth od = "post" enctype = "multipart/form - data"> 
< input name = "node" type = "hidden" value = "check" 
< s:textfield label = "用 户 名 "name = "nane" cssClass = "str" /> 
< s:password label = "密码 ” name = "password " /> 
<s:submit value = "登录 "/> 
</s:form> 


在 登录 验证 的 过 程 中 通过 页 面 获取 的 用 户 名 和 密码 作为 查询 条 件 , 在 用 户 信息 表 中 查 
找 条 件 匹 配 的 用 户 信息 ,如 果 往 返 的 结果 集 不 为 空 ,说 明 验证 通过 ; 反之 说 明 验证 失败 。 前 
台 登 录 验 证 方法 关键 代码 如 下 : 
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public class loginAction extends ActionSupport { 
private String mode; 
private String name; 
private String password ; 
private loginService loginService; 
public String execute() throwsException { 
if(mode. equals("login"))( 
return mode; 
} 
// 注 销 登 录 
if(mode. equals("loginout") ) { 
Mapsession = ActionContext. getContext().getSession(); 
session. remove("userInfo") ; 
return "loginout"; 
} 
// 登 录 检 查 
if (mode. equals("check"))( 
if(name. equals("")){ 
addFieldError("name", "请 填写 用 户 名 "); 
return INPUT; 
} 
if (password . equals("")) { 
addFieldError("password "，" 请 填写 密码 ") ; 
return INPUT; 
) 
intflagLogin = - 1; 
flagLogin = loginService.checkAccount(name, password ); 
switch(flagLogin)( 
case0 :addFieldError("name", "用户 名 不 存在 "); 
case - l:addFieldError("password "," 密 码 错误 "); 


} 

if(hasErrors())( 
return INPUT; 

} else ( 
Mapsession = ActionContext. getContext().getSession() ; 
session. put("userInfo", loginService. getUserInfo()); 
return SUCCESS; 

} 


} 
return SUCCESS; 
} 


用 户 管理 关键 代码 如 下 : 


< s: include value = "commonMenu. jsp"></s:include> 
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< div class = "clear"></div> 
< div class = "system box" style = "padding- top:25px;"> 
< table cellSpacing = 0 cellPadding = 0 class = "users - table table " 
style = "border:lpx +cccsolid; border - left: 0px"> 

<tr> 
<th width = "100px"> 用 户 名 </th> 
<th width = "100px"> 组 别 </th> 
<th width = "100px"> 真 实 姓名 </th> 
<th width = "140px"> 手 机 </th> 
<th width = "140px"> 邮 箱 </th> 
<th width = "140px"> 添 加 时 间 </th> 
<th width = "140px"> 操 作 </th> 

</tr> 

<s: iterator value= "users" var = "user"> 

«tr id="<s:property value=" % {autoId}"/>"> 
< td»« s:property value=" $ {userName}"/></td> 
«td» 
<s:if test = "userLevel == 0"> 超 级 管理 员 </s:if> 
<s:if test = "userLevel == 1"> 管 理 员 </s:if> 
<s:if test = "userLevel == 2"> 普 通用 户 </s:if> 
</td> 
< td»« s:property value =" % {userRealName}"/></td> 
< td»« s:property value =" $ {userMobile}"/></td> 
« td»« s:property value =" $ {userEmail}"/></td> 
< td»« s:property value =" $ {userAddDate}"/></td> 


<td>< span class = "controledit"> 修 改 </span> 
< si if test = "userLevel!= 0&& # session. userInfo. userLevel == 0">| < span 
class = "controldelete"> 删 除 </span> 
</s:if > 
</td> 


</tr> 
</s: iterator > 
3. 修改 密码 
修改 用 户 密码 的 界面 如 图 8. 4-15 所 示 。 


用 户 管理 添加 用 户 Ben 导入 Excel 


BZB: 
Lcd 


(SEO 


图 8. 4-15 修改 用 户 密码 的 界面 
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修改 密码 的 关键 代码 如 下 : 


< s:form action = "addUser" cssClass = "system - table " meth od = "post" enctype = "multipart/ 
form - data"> 
< table class = "system - table "> 
<tr>< th colspan = "2"> 修 改 密码 </th></tr> 
< input type = "hidden" name = "mode" class = "str" value = "editPsd"/> 
<tr> 
<td width = "80px"> 旧 密码 </td> 
<td width = "340px"> 
< s:password name = "oldPsd" cssClass = "psdi290" reqiured= "true" value = ""/» 
</td> 
</tr> 
<tr> 
«td width = "80px"> 新 密码 </td> 
«td width = "340px"> 
< s:password name = "newPsd" cssClass = "psdi290" reqiured = "true" value = ""/» 
</td> 
</tr> 
<tr> 
<td width = "80px"></td> 
<td width = "340px"> 
< input type = "submit" class = "system - button" value = "提交 "/> 
</td> 
</tr> 
</table> 
</s:form> 


8.5 系统 发 布 


前 面 细致 地 介绍 了 交通 WebGIS 信息 系统 的 实现 过 程 。 为 了 加 深 理解 ,本 节 重 新 对 交 
通 WebGIS 信息 系统 的 构建 过 程 进行 梳理 。 


8.5.1 开发 环境 


在 编写 本 系统 时 ,采用 的 开发 环境 组 件 如 下 (读者 可 以 参考 搭建 自己 的 环境 ): 

(1) Web 服务 器 : Tomcat7. 0, 下 载 地 址 为 http://tomcat. apache. org/download- 
70. cgi。 

(2) 地 图 服务 器 : ArcGIS Server 10. 2。 

(3) 前 台地 图 框架 : ArcGIS JavaScript。 

(4) 地 图 编辑 : ArcGIS Desktop 10.2。 
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(5) 手机 端 : Android, 

(6) 数据 库 : PostgreSQL9. 2 下 载 地 址 为 http://www. postgresql. org/download/; 
postgis-2. 0. 3. tar 下 载 地 址 为 http://postgis. net/source。 

(7) FOE A: EclipseSDK, 下 载 地 址 为 http://www. eclipse. org/ downloads/ download. 
php? file — /technology/epp/downloads/release/kepler/R/eclipse-jee-kepler-R-win32. zip; 
tomcat 对 eclipse 的 插件 ,下 载 地 址 为 http://www. eclipsetotale. com/tomcatPlugin. html, 


8.5.2 创建 工程 


1. 建立 名 为 arcgisweb 的 Web 工程 
(1) 启动 Eclipse, 在 新 建 项 目 对 话 框 中 选择 Dynamic Web Project, 如 图 8. 5-1 所 示 。 


Edit Navigate Search Project Tomcat Run Window Help 


New ‘Alt+ Shift+N » 
Open File... 
Close Cols k 
Close All Critshitew |S 
di Connector Project 
J Save CUl$ |E? Application Client Project 
Sow Me» di Static Web Project 
Save All Cuttshit+s | pe Project. 
Revert 
© Servet 
Mom Té Session Bean (EJB 3.) 
[| Rename. F2 r$ Message-Driven Bean (EB 3.0) 
E Refresh A F5 |j Web Service 
Convert Line Delimiters To 中 名 Felder 
D Print. Crip |Q Rie 
Switch Workspace > T3 Example... 
n 


图 8. 5-1 新 增 项 目 对 话 框 


(2) 直接 单 击 Next 按钮 ,在 Projectname 中 输入 工程 名 arcgisweb, 设 定 Dynamic web 
module version( 不 同 的 Dynamic web module version 对 应 的 工程 web. xml 不 一 样 ; Web 
组 件 版 本 不 兼容 ,tomcat6 一 般 对 应 2.4 或 2.5,tomcat7 对 应 3.0) ,如 图 8. 5-2 所 示 。 

(3) 单 击 Next 按钮 ,指定 Java 文件 的 编译 路 径 ( 一 般 设置 为 build\classes) ,如 图 8. 5-3 
所 示 。 

(4) 单 击 Next 按钮 ,分别 在 ContextRoot Contentd irectory ,JavaSourceDirectory "Pit 
置 Web 服务 的 根 路 径 、Web 资源 的 目录 名 称 和 源 代 码 目录 ,如 图 8. 5-4 所 示 。 

(5) 单 击 Finish 按钮 完成 工程 创建 ,在 Project Explorer 中 看 到 Eclipse 创建 的 目录 : 
如 果 需 要 改变 工程 创建 时 的 一 些 设置 ,可 以 右 击 工程 目录 ,在 弹出 的 菜单 中 ,选择 properties 


Dynamic Web Project 


Create a standalone Dynamic Web project or add it to a new or existing Enterprise Application. 
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Project name: arcgisweb 
Project location 
[V] Use default location 


Location: [EAworkspace\ arcgisweb 


Target runtime 


z) [Modin] 


new functionality to the project. 


The default configuration provides a good starting point. Additional facets can later be installed to add 


EAR project name: [EAR 


7] [New Project. | 


Working sets 
ElAdd project to working sets 


Working sets: | 


图 8.5-2 新 建 工程 


Configure project for building a Java application. 


Source folders on build path: 


B src 


8.5-3 指定 Java 文 件 的 编译 路 径 
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Web Module J 
Configure web module settings. | 


8.5-4 设置 Web 服务 的 根 路 径 


选项 ,在 弹出 的 设置 对 话 框 中 ,设置 Web 工程 的 根 目 录 ( 也 就 是 部 属 路 径 , 一般 设 置 为 
WebContent) fill Dynamic Web Module Version ,如 图 8. 5-5 所 示 。 


[type filter text || Project Facets ero 
> Resource | 
Builders | Configuration: Drm 
Project Facet Version Deis | animes 
Bermate SERGE — | | » E guia? Web Sen A 
à dole Wah Sariana, D Axis2 Web Services. 
Swane E B) CXF 2x Web Services 10 
> Java Code Style Enables Web services generation through the Axis2 
» Java Compiler Tur 17— Web services engine. 
> Java Editor 
" WA Javascript 10 
Javadoc Location 加 B) JavaServer Faces 21 
b JavaScript FF B) JAX-RS (REST Web Services) 11 
Be xe 21 
Bea 20 
| BB WebDoclet (XDoclet) 123 
Targeted Runtimes | 
> Task Repository 
Task Tags 
Templates 
Tomcat 
? Validation | 
Web Content Settings 
Web Page Editor 
|| Web Project Settings 
WikiText 
> XDodet D m 
@ Catan erm 
= 


8.5-5 设置 Web 工程 的 根 目录 


(6) 项 目的 文件 结构 如 图 8. 5-6 所 示 。 

2. 将 现 有 文件 导入 项 目 中 

CD 将 现 有 的 工程 导入 Eclipse 中 ,如 图 8. 5-7 所 示 。 
(2) 选择 现 有 的 工程 的 根 目 录 , 如 图 8. 5-8 所 示 。 


第 8 章 ”交通 WebGIS 信 息 系 统 |P 385 


Create new projects from an archive file or directory. gg || 


Select an import source: 


3 Existing Projects into Workspace 5 


国 Preferences 
b (d JAX-WS Web Services. 
D Qty Deployment Descriptor: TONGXIANG 
4 28 Java Resources 
b @ src 
> mà Libraries 
4 Bl JavaScript Resources 
> Pipe T, App Client JAR fle 
> mÀ ECMAScript Built-In Library ah Jove EE Uy Jar 
> @ ECMA 3 Browser Support Pavers = 
& build 
4 (& WebContent 
> @ META-INF 


Medus [o] [<eo erm NCC | (conceal 


图 8.5-6 项 目的 目录 图 8. 5-7 FARAILE 


Import Projects 


Select a directory to search for existing Eclipse projects. [= 


Select root directory: |E\workspace\arcgisweb 


|| © Select archive file: 


| Browse... 
Projects: 


了 ]L Select 


@ [perm UE | ern [erm 


图 8. 5-8 选择 根 目录 


(3) 导入 成 功 后 的 工程 文件 夹 目录 如 图 8. 5-9 所 示 。 
3. 在 ArcGIS Desktop 添加 GIS 服务 器 


要 通过 ArcGIS Desktop 发 布 服务 至 ArcGIS Server 中 ,除了 双方 需要 同时 连接 相同 的 
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数据 库 外 ,还 需要 在 Desktop 中 添加 ArcGIS Server 服务 器 连接 。 在 ArcMap 右 侧 目录 中 
单 击 GIS 服务 器 前 面 的 加 号 ,在 下 拉 栏 中 选择 * 添 加 ArcGIS Server”, 弹 出 “添加 ArcGIS 
Server” 框 ,在 执行 操作 中 选择 “发 布 GIS 服务 ”, 单 击 * 下 一 步 ? 按 钮 ,如 图 8. 5-10 所 示 。 


Cv hee RAMS «| O]4 
Ws Project Explorer £3 | 85. Navigator = © | @ arcgisbasejs 
esle ~ 18/* 
a BF arcgisweb ^ 2 * Bcontent: 地 图 和 
D 49 JAX-WS Web Services 3 * @date:2014/11, 
3 Loading descriptor for arcgisweb... 4 * gnameSpace:maj 
> @ Java Resources 5 *t* 
> mh JavaScript Resources 6 . 
> © build Ld 
4 & WebContent 8 * paca 
> Sis | 
b @ META-INF n var global map; 
> & style 128/* 
> Gp templets 13 * Bcontent: 地 图 
“WE 14 * @spacename:ma 
> @ ib 15 */ 
E epplicationContextam! 16 var map-(); 
B webxml 17®map.init = funct: 
README.md 18 require([ 


图 8.5-9 导入 的 工程 目录 
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图 8. 5-10 添加 ArcGIS Server 
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配置 服务 器 的 常规 属性 如 图 8. 5-11 所 示 。 服 务 器 的 URL(U) 为 http://localhost: 
6080//arcgis, 服 务 器 类 型 为 ArcGIS Server。 身 份 验证 中 的 用 户 名 和 密码 为 创建 ArcGIS 
Server 站 点 时 的 用 户 名 和 密码 ,这 里 账户 名 为 arcgis ,密码 为 123456 。 


ug d 


(C sers \ADMINT I \AppData\Local Vr enpVarcEA 
辆 使 用 人 reGTS Desktop BISHER W 


图 8. 5-11 服务 器 常规 属性 设置 


连接 发 布 服务 器 成 功 后 可 以 在 Desktop 右 侧 栏 中 看 到 新 添加 的 ArcGIS Server. 如 
图 8. 5-12 所 示 。 


ET PT 
CEPTE EDT APT EIDEM 


p Eere 
120707 29413 n 


图 8. 5-12 成 功 添加 ArcGIS Server 


4. 发 布道 路 最 优 路 径 网 路 分 析 服 务 
导入 道路 网 络 分 析 数 据 集 数据 ,在 开始 菜单 中 打开 ArcMap 10. 2, 单 击 菜单 栏 中 “添加 
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数据 ”添加 道路 数据 ,如 图 8. 5-13 所 示 。 


S| RE) REM EEG) MAO BRS ”地理 处 理 (G) BENQ BOW WAH 
| osessaexinde] -— SAELE 
aafo LLILECIDIT ASIE EET TES Network Analyst | 国 | of, 2 Gl 


b mm ox Tom 
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= st Üm: — GE SEU EUR - Documents wesis 了 
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D E EMAGINA 
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图 8.5-13 ”添加 数据 


选择 添加 数据 的 数据 源 文件 ,这 里 按照 读者 自己 的 地 图 道路 文件 路 径 进 行 选择 ,选择 工 
具 栏 中 的 “连接 到 文件 夹 ”进行 文件 选择 ,如 图 8. 5-14 所 示 。 


ma EPCEEB PEL 


addins, 
Pac 


图 8. 5-14 文件 夹 路 径 选择 
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这 里 已 经 建立 了 网 络 数据 集 , 需 直 接 添加 导入 即 可 ,如 图 8. 5-15 所 示 。 网 络 数据 集 添 


加 成 功 后 的 效果 如 图 8. 5-16 所 示 。 
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图 8. 5-15 ”添加 道路 网 络 数据 集 


图 8. 5-16 ”添加 道路 网 络 数据 集 显示 


在 发 布 网 络 分 析 前 ,首先 必须 在 ArcMap 中 对 道路 网 络 数据 进行 路 径 分 析 ,选择 工具 栏 
“Network Analyst”>“ 新 建 路 径 ”, 在 左 侧 目录 中 显示 图 层 中 新 添加 了 “停靠 点 “点 障碍 ” 
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“路 径 “ 线 障碍 ”“ 面 障碍 ”, 如 图 8. 5-17 所 示 。 
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图 8.5-17 新 建 网 络 分 析 路 径 


在 工具 栏 中 单 击 “创建 网 络 位 置 工 具 ”, 便 可 以 在 地 图 道路 上 放置 多 个 停靠 点 ,这 里 放置 
了 3 个 停靠 点 ,分 别 自 动 顺序 编号 为 1.2.3, 如 图 8. 5-18 所 示 。 
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8.5-18 添加 停靠 点 
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单 击 工具 栏 中 的 “求解 "按钮, 便 会 在 地 图 上 产生 一 条 由 1、2、3 三 点 连接 的 路 径 ,同时 还 


会 弹出 窗口 显示 具体 的 道路 转弯 走向 ,如 图 8. 5-19 所 示 。 
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图 8.5-19 生成 路 径 规划 


在 ArcMap 中 完成 路 径 的 最 优 规划 之 后 , 接 下 来 便 是 发 布 这 一 网 络 服务 ,以 便 在 网 页 中 


调用 这 一 网 络 服务 。 发 布 服务 ,如 图 8. 5-20 所 示 。 
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图 8. 5-20 发布 网 络 服务 
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发 布 网 络 服务 时 选择 一 个 连接 和 服务 名 称 ,连接 选择 之 前 建立 的 Server 发 布 服务 , 服 
务 名 称 选择 "HZStreets”, 如 图 8. 5-21 所 示 。 
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图 8. 5-21 选择 一 个 连接 和 服务 名 称 


将 服务 发 布 至 文件 夹 , 这 里 选择 已 经 创建 了 的 文件 夹 *hangzhou”, 如 图 8. 5-22 所 示 。 
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图 8. 5-22 发布 服务 连接 文件 夹 


第 8 章 ”交通 WebGIS 信 息 系统 |P 393 


在 服务 编辑 器 的 目录 中 选择 “功能 ”选项 ,选择 要 针对 此 服务 启动 的 功能 ,这 里 选择 了 
“地 图 (始终 启用 )”“Network Analysis" " KML", iEEí.— 4E #4 i Network Analysis 选 
项 ,才能 将 网 络 分 析 的 功能 发 布 出 去 ,从 而 调用 网 络 分 析 的 相关 服务 ,如 图 8. 5-23 所 示 。 


连接 : arcgis on localhost, 6080 (admin) 服务 名 称 HZstreets QS Von diss 
常规 功能 
enm 选择 要 针对 此 服务 启用 的 功能 
功能 

地 图 Bwcs 

Network Analysis Bws 

© Feature Access 

KML © schematics 
ET 加 Mobie Data Access 
E] 
au E wrs 
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图 8. 5-23 选择 要 发 布 的 功能 


5. 在 ArcGIS Desktop 中 添加 数据 库 连接 

通过 ArcMap 目录 中 的 数据 库 连接 来 连接 具体 的 数据 库 。 单 击 右 侧目 录 中 的 “添加 数据 
PEJE RE” SUE PEF A i PE“ PostgreSQL” ,实例 选择 本 地 ”*localhost"”。 如 果 设 置 了 服务 器 的 名 
字 , 比 如 “myserver”, 这 里 就 填写 “myserver”"。 身 份 验 证 类 型 中 用 户 名 和 密码 为 数据 库 的 用 户 
名 和 和 密码。 这 里 使 用 之 前 设 定 的 用 户 名 sde, 密 码 123456, 数 据 库 选 择 hz, 如 图 8. 5-24 所 示 。 

完成 后 ,可 以 在 右 侧 目录 中 看 到 新 添加 的 数据 库 连 接 , 如 图 8. 5-25 所 示 。 


X. 


天 arcgis on localhost 6080 (发 布 者 ) 
日 Eg tees 
a Cy 即 用 型 服务 


8. 5-24 数据 库 连接 图 8. 5-25 成 功 添加 数据 库 连 接 
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接 下 来 就 是 发 布地 图 道路 的 要 素 服务 ,发 布 的 基本 流程 和 发 布 网 络 服务 基本 一 致 ,唯一 
的 区 别 是 在 发 布 功能 选择 中 勾 选 Feature Access, Ml 8. 5-26 所 示 。 


S88: arcgis on localhost 6080 (8353) 服务 名 称 : HZStreet QS Von nes Gen 
常规 功能 
en ASL BRAI: 
im 
地 图 
Feature Access cia 
M TT Schematic 
E Mobile Data Access 
hd E Network Analysis 
E ien. 
«m Bws 
LI 
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图 8.5-26 服务 编辑 


发 布 成 功 之 后 ,可 以 打开 浏览 器 ,在 地 址 栏 中 输入 localhost:6080/arcgis/manager。 填 


写 用 户 名 和 密码 后 便 可 以 看 到 在 hangzhou 站 点 下 新 发 布 的 地 图 ,分 别 为 网 络 服务 和 地 图 道 
路 要 素 服务 ,如 图 8. 5-27 所 示 。 


图 8. 5-27 查看 已 发 布 的 服务 
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8.5.3 运行 工程 


1. 桌面 系统 工程 运行 
CD 导入 Web 工程 后 ,还 需要 创建 一 个 Server, 才 能 在 Eclipse 中 运行 与 调试 应 用 。 单 
ii File~New>Other..., 在 弹出 的 对 话 框 中 选择 Server, 如 图 8. 5-28 所 示 。 


8.5-28 ”创建 一 个 Server 


(2) 单 击 Next 按钮 后 ,在 弹出 的 对 话 框 中 选择 Web 容器 ,这 里 选择 Tomcatv7. 0Server。 
(3) 然后 继续 单 击 Next 按钮 ,在 弹出 的 对 话 框 中 ,选择 Tomcat 的 安装 目录 与 JRE 版 
本 ,如 图 8. 5-29 所 示 。 
8] New Server 


Define a New Server ll 
Choose the type of server to create. 


B Tomcat v5.5 Server 


Publishes and runs J2EE and Java EE Web projects and server configurations to a 
local Tomcat server. 


Server npe Tomcat v7.0 Server at localhost (2) 
m do i it —————— 


Configure runtime environments... 


Eom 


e [merum rcm rnm rm 


图 8. 5-29 选择 Web 容器 
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(4) 单 击 Next 按钮 后 ,在 New Server 对 话 框 中 ,左边 的 列表 框 列 出 了 Workspace 中 的 
所 有 Web 工程 ,右边 的 列表 框 表 示 在 这 个 Server 上 部 署 的 Web 工程 ,这 里 将 刚才 的 


dynweb 添加 进来 ,如 图 8. 5-30 所 示 。 


Modify the resources that are configured on the server 


Move resources to the right to configure them on the server 


图 8.5-30 ”部署 的 Web 工程 


(5) Mih Finish 按钮 后 ,Server 就 创建 完了 ,可 以 在 window 一 ShowView 一 Server 中 查 
看 Server, 如 图 8. 5-31 所 示 。 
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8.5-31 查看 Server 
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(6) 创建 完 Server 后 ,可 以 单 击 Server 面板 中 的 Start the server, Start the server in 
debug mode 运行 与 调试 应 用 ,如 图 8. 5-32 Bros - 
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图 8. 5-32 调试 应 用 Server 


CD 右 击 工程 名 ,选择 RunAs- RunOnServer. WA 8. 5-33 


33 所 示 。 
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图 8.5-33 ”调试 工程 


(8) 运行 工程 ,启动 登录 界面 ,输入 用 户 名 和 密码 (系统 默认 用 户 名 和 密码 都 为 
admin) ,如 图 8. 5-34 所 示 。 
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图 8. 5-34 登录 框 


(9) 登录 成 功 进入 系统 后 ,运行 效果 如 图 8. 5-35 所 示 。 


ETT IE anio S à 


图 8. 5-35 运行 效果 


2. 手机 定位 工程 运行 

1) 测试 APP 启动 

单 击 虚拟 机 中 的 Hello World 图 标 , 若 APP 成 功 启动 并 加 载 出 地 图 ,表明 
MainActivity 运行 正常 ,运行 效果 图 如 图 8. 5-36 所 示 。 

2) 测试 定位 功能 

在 Eclipse 中 打开 DDMS 透视 图 ,如 图 8. 5-37 所 示 ,选中 左 侧 Devices 目录 下 的 设备 ， 
这 时 右 侧 的 LocationControls 显示 为 可 用 状态 ,手动 输入 一 个 模拟 位 置 的 经 纬度 ,然后 单 击 
Send 按钮 。 

在 虚拟 机 中 ,设备 收 到 内 容 提供 者 GPS 提供 的 位 置 ,地 图 自动 平移 到 收 到 的 经 纬度 坐 
标点 处 ,同时 会 有 一 个 Toast 显示 当前 位 置 的 经 度 与 纬度 值 ,屏幕 上 方 的 EditText 也 将 文 
本 信息 更 新 为 当前 位 置 的 经 纬度 值 , 至 此 定位 功能 测试 完毕 ,如 图 8. 5-38 所 示 。 

3) 测试 切换 地 图 

右 击 虚拟 机 上 的 MENU 按钮 ,弹出 选项 菜单 ,如 图 8. 5-39 所 示 ,继续 单 击 更 多 还 会 展 
开 另 外 3 种 地 图 类 型 。 
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图 8. 5-36 APP 主 界面 
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图 8.5-37 DDMS 透视 图 
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图 8.5-38 定位 功能 测试 
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图 8. 5-39 选项 菜单 


依次 单 击 菜单 上 的 每 一 种 地 图 类 型 .然后 观察 界面 中 的 底 图 是 否 切换 为 对 应 的 地 图 , 若 
每 次 都 能 成 功 加 载 并 显示 出 不 同 的 地 图 类 型 , 则 测试 通过 。 

4) 测试 搜索 

单 击 屏幕 下 方 的 “搜索 ”按钮 ,此 时 会 调用 Placesearchactivity, 初 始 界 面 为 整个 世界 地 
图 ,在 文本 输入 框 中 输入 hangzhou 来 测试 搜索 功能 , 单 击 搜索 到 的 点 测试 弹 窗 功能 ,正常 运 
行 的 效果 如 图 8. 5-40 所 示 。 

5) 测试 路 线 查 询 

单 击 屏幕 下 方 的 路线” 按钮 ,这 时 会 调用 Routeractivity, 通 过 长 按 或 者 手动 输入 的 方 
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式 来 选择 目的 地 ,为 了 测试 RoutingDialogFragment 类 能 否 正常 工作 ,我 们 单 击 下 方 的 路 线 
查询 按钮 ,弹出 “路 线 ” 对 话 框 ,界面 如 图 8. 5-41 所 示 。 


E 5554:AVD_for_Nexus_S_by Google 


- Oy 


hangzhou 


Hangzhou, Zhejiang S| WKK 


图 8. 5-40 ”搜索 界面 


5554:AVD for Nexus. S by Google -TEN 


图 8. 5-41 路 线 对 话 框 
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输入 起 始 地 址 ,笔者 以 美国 的 地 址 为 例 来 测试 路 线 查询 功能 ,在 文本 框 中 输入 起 始 地 址 
“180 New York St Redlands CA 92373” 和 “380 New York St Redlands CA 92373”, 然 后 单 


也 理 编码 过 程 如 图 8. 5-42 所 示 。 


5554:AVD for Nexus S by. Google 


击 “ 获 取 路 线 ” 按 钮 ， 


@ 获取 路 线 


Ne 


图 8. 5-42 路线 查询 中 


路 线 查询 结果 如 图 8. 5-43 所 示 o 

6) 测试 导航 功能 

路 线 导 航 界面 可 以 从 主 界面 的 “导航 ?按钮 进入 。 导 航 功 能 基于 路 线 查询 功能 ,也 就 是 
说 只 有 查询 出 了 路 线 结果 ,才能 进行 导航 。 基 于 路 线 查 询 测试 所 得 到 的 路 线 结果 , 单 击 屏幕 
下 方 的 listview 控件 ,会 弹出 路 径 片段 的 抽 层 ,界面 如 图 8. 5-44 所 示 。 单 击 其 中 的 某 一 个 
路 径 片 段 , 抽 层 会 自动 隐藏 ,选中 的 路 径 片段 会 以 红色 显示 在 路 径 上 。 抽 屠 控 件 上 方 有 
语音 提示 开关 ,在 实际 运行 过 程 中 程序 会 根据 用 户 的 当前 位 置 给 出 语音 提示 ,如 图 8. 5-44 


所 示 。 


W 
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E 5554:AVD for Nexus. S by Google =EN) 
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censed for Developer 
se Only 


Location 1 - Location 2 
2.1 minutes (1.0 miles) 4 o 


图 8. 5-43 ”路 线 查询 结果 


uS by Googie SSSXAVO Tor Next 3 by Google 


My Location 


Go north on New York St 
toward W State St 
0.3 minutes (0.1 miles) 


Tum right on W State St 
0.7 minutes (0.3 miles) 


Tum left on Texas St 
0.1 minutes (0.1 miles) 


Turn left on W Redlands Blvd 
0.5 minutes (0.3 miles) 


censed for Developer 
0.5 minutes (0.2 miles) seqOnly A * 


Tum left on New York St 


Destination - 
Tum right on W State St 


XX 0.7 minutes (0.3 miles) qo 


图 8. 5-44 路径 抽 导 和 路 径 片段 展示 
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8.6 开发 总 结 


通过 本 章 的 学 习 , 相 信 读 者 已 经 基本 掌握 了 基于 GIS 的 信息 系统 开发 。 现 在 来 对 基于 
GIS 的 信息 系统 开发 做 个 总 结 。 

CD. 在 项 目 开 始 前 储备 相关 技术 : 在 项 目 正式 开发 前 ,应 了 解 并 储备 这 个 项 目 可 能 用 
到 的 技术 ,如 本 系统 使 用 的 ArcGIS Desktop、ArcGIS Server 10. 2、ArcGIS JavaScript、 
Doijo .Struts2 .Spring 和 Hibernate 等 。 

(2) 分 析 项 目的 业务 流程 : 分 析 项 目 数据 库 的 E-R 图 ,了 解 各 个 表 之 间 的 联系 ,分 析 清 
楚 项 目的 业务 流程 才能 做 到 心中 有 数 。 

(3) 合理 安排 解决 方案 : 大 多 数 项 目 均 基于 数据 库 开发 ,所 以 合理 安排 解决 方案 非常 
重要 。 一 些 SQL 语句 即 可 解决 的 问题 不 要 放 在 程序 中 解决 ,如 数据 分 析 、 排 序 及 自动 编 
号 等 。 

(4) 一 定 要 为 代码 加 上 注释 : 为 代码 加 上 注释 是 一 件 既 方便 自己 又 方便 他 人 的 事情 ， 
是 团队 成 员 之 间 最 好 的 离线 交流 方式 。 

(5) 边 写 代码 边 测试 : 一 定 要 在 开发 过 程 中 随时 测试 代码 ,一旦 发 现 错误 及 时 定位 错 
误 的 位 置 ,以 便 及 时 改正 。 
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